My app uses javascript, google maps api, php and mysql. It is supposed to get a list of markers from mysql database, dump it onto a myXML.xml file and then read this file in order to draw these markers on the map everytime the map loads.
<!DOCTYPE html>
<html>
<head>
<script>...</script>
<script>
function initialize()
{
...
//load previous markers from dbase
**loadMarkers();**
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
//loadMarkers
function **loadMarkers()**
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var xmlDoc=document.implementation.createDocument("","",null);
***//alert("here1");***
xmlDoc.load("myXML.xml");
xmlDoc.async=false;
***//alert("here2");***
//xmlDoc.onload=doNothing;
var markerNodes = xmlDoc.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++)
{
var RowID = markerNodes[i].getAttribute("RowID");
var LatLng = markerNodes[i].getAttribute("LatLng");
var Type = markerNodes[i].getAttribute("Type");
alert(Type);
//Separate Lat and Lng from LatLng
var string = LatLng;
var n=string.indexOf(",");
var Lat = string.slice(1,n);
var n2=string.indexOf(")");
var Lng = string.slice(n+2,n2);
//Set Marker Type
if(Type=="hospital")
markerIcon='markHospital.png';
if(Type=="airport")
markerIcon="airport.jpg";
var marker3=new google.maps.Marker({
position:new google.maps.LatLng(Lat,Lng),
icon:markerIcon
//icon:'markHospital.png'
//animation:google.maps.Animation.BOUNCE
});
marker3.setMap(map);
}
}
}
//xmlhttp.open("GET","addmarker.php?maidenLatLng="+maidenLatLng+"&clickID="+clickID,true);
var queryString = "";
xmlhttp.open("GET", "getmarkers.php" + queryString, true);
xmlhttp.send();
}
...
The code seems to work fine but only when the two alert messages (inside loadMarkers())are NOT commented out. The moment they are commented out (as they are now) then old markers do not load and are not visible.
I suspect this is timing issue of some kind. may be the myXML.xml file is not ready when the script reaches that point. So, i also set the async property of XMLHTTPRequest to false. But that didn't help either. Any idea why this script works only when the two alert boxes are allowed to run?
Any help will be greatly appreciated :)
