0

이 코드는 Chrome에 표시되지 않습니다. 왜? Firefox에서 작동했습니다.Google 크롬에서 개인지도를 표시 할 수 없습니다.

코드 : 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> 

답변

2

당신은 두 번 Google지도 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> 

당신은 크롬 DevTools로 콘솔에서 다음을 참조해야 Google지도 포함했다 API는이 페이지에서 여러 번 사용할 수 있습니다. 예기치 않은 오류가 발생할 수 있습니다.

이 한 script 태그에 API에 대한 귀하의 HTML을 변경

:

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

감사합니다, 그것은 도왔다. – Oxydron

+0

좋아요! 허용 된 답변으로 표시하는 것이 좋습니까? –

관련 문제