谷歌瀏覽器無法顯示個人地圖

這段代碼沒有顯示在谷歌瀏覽器中。爲什麼？它在Firefox中工作。谷歌瀏覽器無法顯示個人地圖

代碼：我試圖從一個xml文件加載一組座標+描述到渲染一張地圖並在上面繪製它們。

還有一個鼠標手柄可以在屏幕上返回鼠標點擊的座標。

<!DOCTYPE html> 
<html lang="pt-br"> 

<head> 
    <link rel="stylesheet" href="maps.css"> 
    <div id="map_canvas"></div> 
    <!-- Loading jQuery --> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
    <!-- Loading Google Map API engine v3 --> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 


    <script src="http://maps.googleapis.com/maps/api/js?key=MYID&sensor=false"> 
    </script> 

    <script type="text/javascript"> 
    var map; 
    var global_markers = []; 
    var marker = null; 
    var markers = []; 

    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.open("GET", "imoveis.xml", false); 
    xmlhttp.send(); 
    xmlDoc = xmlhttp.responseXML; 
    var x = xmlDoc.getElementsByTagName("imovel"); 

    for (i = 0; i < x.length; i++) { 
     var lat = x[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue 
     var lng = x[i].getElementsByTagName("lng")[0].childNodes[0].nodeValue 
     var desc = x[i].getElementsByTagName("desc")[0].childNodes[0].nodeValue 
     var aux = [lat, lng, desc]; 
     markers.push(aux); 
    } 

    var infowindow = new google.maps.InfoWindow({}); 

    function initialize() { 
     //geocoder = new google.maps.Geocoder(); 
     var myOptions = { 
      zoom: 12, 
      center: new google.maps.LatLng(-21.2450, -45), 
      disableDefaultUI: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     addMarker(); 

     google.maps.event.addListener(map, 'click', function(event) { 
      //call function to create marker 

      $("#coordinate").val(event.latLng.lat() + ", " + event.latLng.lng()); 
      $("#coordinate").select(); 

      //delete the old marker 
      if (marker) { 
       marker.setMap(null); 
      } 

      //creer à la nouvelle emplacement 
      marker = new google.maps.Marker({ 
       position: event.latLng, 
       map: map 
      }); 

     }); 
    } 

    function addMarker() { 
     for (var i = 0; i < markers.length; i++) { 
      // obtain the attribues of each marker 
      var lat = parseFloat(markers[i][0]); 
      var lng = parseFloat(markers[i][1]); 
      var trailhead_name = markers[i][2]; 

      var myLatlng = new google.maps.LatLng(lat, lng); 

      var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>"; 

      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name 
      }); 

      marker['infowindow'] = contentString; 

      global_markers[i] = marker; 

      google.maps.event.addListener(global_markers[i], 'click', function() { 
       infowindow.setContent(this['infowindow']); 
       infowindow.open(map, this); 
      }); 
     } 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 

<body> 
    <div id="googleMap" style="width:500px;height:380px;"></div> 
    <input type="text" id="coordinate" value="Latitude, Longitude" /> 
    <div id="map"></div> 

</body> 

</html>

來源

2014-02-10 Oxydron

您正在加載谷歌地圖API兩次：

<!-- Loading Google Map API engine v3 --> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 


<script src="http://maps.googleapis.com/maps/api/js?key=MYID&sensor=false"> 
</script>

您應該看到在Chrome DevTools控制檯以下：

警告：你已經包括了谷歌地圖API多次在此頁面上。這可能會導致意外的錯誤。

更改HTML的API只是一個script標籤：

<!-- Loading Google Map API engine v3 --> 
<script src="http://maps.googleapis.com/maps/api/js?v=3&key=MYID&sensor=false"></script>

來源

2014-02-10 14:16:16

謝謝，它幫助。 – Oxydron

太棒了！不要介意將此標記爲接受的答案嗎？ –

谷歌瀏覽器無法顯示個人地圖

回答

相關問題