如何从mysql中读取标记信息并使用AJAX动态显示谷歌地图上的标记？时间问题

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 :)

If you were using jQuery, you could use something like ajaxComplete to only load all the markers from the XML once the AJAX request had completed.

如何从mysql中读取标记信息并使用AJAX动态显示谷歌地图上的标记？ 时间问题

如何从mysql中读取标记信息并使用AJAX动态显示谷歌地图上的标记？时间问题