0

google API v3 PHP / SQLデータベースでカスタムインフォボックスを使用しようとすると、現在の問題が発生します。私はどこを台無しにしたかを理解するのに最も苦労しています、divは地図を持っている代わりに空白で表示されます。どんな助けでも素晴らしいでしょう！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">

var customIcons = {
  Clinic: {
    icon: 'icon_2.png',
  },
  Secondary: {
    icon: 'icon_1.png',
  }
};

function initialize() {
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        scrollwheel: false,
        mapTypeId: 'roadmap'
    });


    downloadUrl("xml.php", function(data) {
        function createMarker(markerXML) {
            var name = markerXML.getAttribute("name"),
                postid = markers [i].getAttribute("post_id"),
                address = markers[i].getAttribute("address"),
                phone = markers[i].getAttribute("phone"),          
                listtype = markers[i].getAttribute("type"),
                monday = markers[i].getAttribute("monday"),
                tuesday = markers[i].getAttribute("tuesday"),
                wednesday = markers[i].getAttribute("wednesday"),
                thursday = markers[i].getAttribute("thursday"),
                friday = markers[i].getAttribute("friday"),
                saturday = markers[i].getAttribute("saturday"),
                sunday = markers[i].getAttribute("sunday"),
                type = markers[i].getAttribute("type"),
                point = new google.maps.LatLng(
                lat = parseFloat(markerXML.getAttribute("lat")),
                lng = parseFloat(markerXML.getAttribute("lng")),


                icon = customIcons[type] || {},

                marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(lat, lng),
                    icon: icon.icon,
                }),

                boxText = document.createElement("div");

            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
            boxText.innerHTML = "<b>" + name + "</b> <br/> <i>" + listtype + "</i> <br/>" + address + "<br/>" + phone + "<br/>" + monday + tuesday + wednesday + thursday + friday + saturday + sunday;

            var myOptions = {
                content: boxText,
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-140, 0),
                zIndex: null,
                boxStyle: {
                    background: "url('tipbox.gif') no-repeat",
                    opacity: 0.75,
                    width: "280px"
                },
                closeBoxMargin: "10px 2px 2px 2px",
                closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false
            };

            var infoBox = new InfoBox(myOptions);

            google.maps.event.addListener(marker, 'click', function () {
                    infoBox.open(map, marker);
                }
            });
        }

        var xml = data.responseXML,
            markers = xml.documentElement.getElementsByTagName("marker"),
            numMarkers = markers.length;

        for (var i = 0; i < numMarkers; i++) {
            createMarker(markers[i]);
        }
    });
}

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.send(null);
}

function doNothing() {}

</script>    


<div id="map_canvas" style="width: 500px; height: 300px"></div>

4

1 に答える 1

1

javascriptコンソールを見て、そこで見つかったエラーを修正します。dowloadUrl呼び出しをコメントアウトするだけで、マップが元に戻ります。

xmlのサンプルを提供しませんでしたが、2番目のステップ（javascriptエラーを修正した後）は、ブラウザーでxmlフィードを開き、それが有効かどうかを確認することです（または、xmlバリデーターを介して実行できます）。

この記事（あなたが始めたように見えます）もいくつかのデバッグの提案を提供します。

作業バージョン

于 2012-08-23T02:39:56.007 に答える