Google Maps-从SQL数据库（XML，PHP）放置标记

Question

I'm working through this tutorial from Google https://developers.google.com/maps/articles/phpsqlajax_v3 to use it for my own web application and I'm running into some problems. 我正在通过Google https://developers.google.com/maps/articles/phpsqlajax_v3处理本教程，以将其用于自己的Web应用程序，但遇到了一些问题。

First, I have created a form that accesses a PHP file to write to my SQL database and it shows that everything is running smoothly. 首先，我创建了一个访问PHP文件以写入我的SQL数据库的表单，该表单表明一切运行顺利。 It connects properly and fills in the table as expected. 它正确连接并按预期填写表格。

Second, using the tutorial above, I have managed to create a PHP file that generates correct XML. 其次，使用上面的教程，我设法创建了一个生成正确XML的PHP文件。

Third, I've created a blank form with a button that runs a mapload() function when clicked.. which is supposed to do the following: initialize the map, run through the xml file, and plot the points. 第三，我创建了一个带有单击按钮的空白窗体，该按钮在单击时运行mapload（）函数。该按钮应执行以下操作：初始化地图，遍历xml文件并绘制点。

The map initialized correctly when the button is clicked, but for some reason it's not plotting the points. 单击该按钮时，地图已正确初始化，但是由于某些原因，它并未绘制点。 So, I'm gathering that there's an error in my javascript somewhere. 因此，我正在收集我的JavaScript某处错误。 Can anyone diagnose and solve the problem? 谁能诊断和解决问题？ Here's the source: 来源：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My Application</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=my-  key&sensor=false"
            type="text/javascript"></script>


<script>

$(document).ready(function(){
    $("#map").click(function(){
    $("#mapcontainer").slideToggle("slow");
    });  
});

//<![CDATA[

function mapload() {

var mapstyle = [{featureType: "administrative",stylers: [{ visibility: "off" }]},
    {featureType: "poi",stylers: [{ visibility: "off" }]},
    {featureType: "transit",stylers: [{ visibility: "off" }]},
    {featureType: "water",elementType: "geometry",stylers: [{ visibility: "simplified" },{ hue: "#1c252f" },{ saturation: "-55" },{lightness: "0" }]},
    {featureType: "water",elementType: "labels",stylers: [{ visibility: "off" }]},
    {featureType: "poi.park",elementType: "geometry",stylers: [{ visibility: "simplified" },{ hue: "1c2f22" },{ saturation: "-55" },{ lightness: "15" }]},
    {featureType: "poi.park",elementType: "labels",stylers: [{ visibility: "off" }]},
    {featureType: "road",elementType: "geometry",stylers: [{ visibility: "simplified" },{ saturation: 42 },{ hue: "#ffa200" },{ lightness: 33 }]},
    {featureType: "road",elementType: "labels",stylers: [{ hue: "#0019ff" },{ lightness: 51 },{ saturation: -88 }]}
]

var map = new google.maps.Map(document.getElementById("mapcontainer"), {
    center: new google.maps.LatLng(20,0),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    navigationControl: false,
    streetViewControl: false,
    styles: mapstyle
});

var InfoWindow = new google.maps.InfoWindow;

downloadUrl ("mapexpand.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        var id = markers[i] .getAttribute("id");
        var name = markers[i] .getAttribute("marker");
        var point = new google.maps.LatLng(
            parseFloat(markers[i] .getAttribute("Lat")),
            parseFloat(markers[i] .getAttribute("Lng")));
        var html = "<b>" + name + "</b> </br/>" + address;
        var markericon ='images/markericon.png';
        var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: markericon
        });
    bindInfoWindow(marker, map, InfoWindow, html);
    }
});
}

function bindInfoWindow(marker, map, wishWindow, html){
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    });
}

function downloadUrl (url, callback) {
    var request = window.ActiveXObject ?
    new ActiveXObject ('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
    };

    request.open('GET', url, true);
    request.sent(null);

}

function doNothing() {}

//]]>

</script>

</head>

<body onload='getLocation()'>



<div id="graphic"></div>
<div id="textbox"></div>


     <form action="store.php" method="post">

            <textarea cols="37" rows="7" autofocus maxlength="255" name="text"></textarea>
            <input type="hidden" id="lat" name="latitude">
            <input type="hidden" id="long" name="longitude">
            <input type="submit" id ="sub" name="submit">

     </form>

<div id="mapcontainer">


</div>

    <form>

        <input type="button" id="map" class="mapexpand" onClick="mapload()"></input>

    </form>

     <script>

     var lat=document.getElementById("lat");
     var long=document.getElementById("long");

     function getLocation() {

         if (navigator.geolocation){
         navigator.geolocation.getCurrentPosition(showPosition);
         }
    }

     function showPosition(position) {
         lat.value=+position.coords.latitude;
         long.value=+position.coords.longitude;
     }


 </script>

</body>
</html>

XML: Output - lat and long removed for privacy, but outputs correct data. XML：输出-lat和long出于隐私目的已删除，但输出正确的数据。

<markers>
<marker marker="sweettttt" latitude="(lat removed)" longitude="(lng removed)"/>
</markers>

Answer 1

Ensure the path to images/markericon.png is correct. 确保images/markericon.png的路径正确。 As no marker will show if the path is wrong. 因为没有标记会显示路径是否错误。

Google Maps-从SQL数据库（XML，PHP）放置标记

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-09-24 20:57:48

Google Maps-从SQL数据库（XML，PHP）放置标记

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-09-24 20:57:48

解决方案1
1 已采纳 2012-09-24 20:57:48