2011-07-08 13 views
15

Utknąłem na tym od kilku dni. Mam problemy z dodawaniem wielu punktów do mapy przy użyciu wersji 3 interfejsu API JavaScript.Dodawanie wielu punktów do Google Map za pomocą interfejsu API JavaScript v3

czytam this thread i this thread a także this thread na SO i złapałem kilka błędów i dokonaliśmy pewnych zmian, ale nadal nie mogę dostać zupełnie nic do wyświetlenia wyjątkiem tekstu HTML w map_canvas.

Każda pomoc jest doceniana. Dzięki.

bieżącej iteracji kodu:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { initialize(); }); 

    function initialize() { 
     var map_options = { 
      center: new google.maps.LatLng(33.84659,-84.35686), 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options); 

     var info_window = new google.maps.InfoWindow({ 
      content: 'loading' 
     }); 

     var t = []; 
     var x = []; 
     var y = []; 
     var h = []; 

     t.push('Location Name 1'); 
     x.push(33.84659); 
     y.push(-84.35686); 
     h.push('<p><strong>Location Name 1</strong><br/>Address 1</p>'); 

     t.push('Location Name 2'); 
     x.push(33.846253); 
     y.push(-84.362125); 
     h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>'); 

     var i = 0; 
     for (item in t) { 
      var m = new google.maps.Marker({ 
       map:  google_map, 
       animation: google.maps.Animation.DROP, 
       title:  t[i], 
       position: new google.maps.LatLng(x[i],y[i]), 
       html:  h[i] 
      }); 

      google.maps.event.addListener(m, 'click', function() { 
       info_window.setContent(this.html); 
       info_window.open(map, this); 
      }); 
      i++; 
     } 
    } 
</script> 
<div id="map_canvas" style="width:400px;height:400px;">Google Map</div> 
+1

Możesz również rozważyć [gis.se] – jcolebrand

Odpowiedz

15

Problemem jest tutaj:

info_window.open(map, this); 

Powinno być:

info_window.open(google_map, this); 

ponieważ nie ma tu zmienna o nazwie map. Wersja robocza tutaj: http://jsfiddle.net/nrabinowitz/2DBXY/

Jeśli jeszcze tego nie robisz, spróbuj użyć narzędzia takiego jak Firebug lub konsola Chrome - debugowanie JavaScript jest prawie niemożliwe bez niego.

+0

WOW. To zawsze małe rzeczy, prawda ?! Poważnie, dzięki. – gtcharlie

+1

Przegłosowałem teraz, że mam wystarczającą wiarygodność. – gtcharlie

+0

Dziwne. Wysłałem powyższy kod w codepen i działało tak, jak jest z mapą vs. google_map. Wyjąłem linię 'info_window.open (map, this);' i nadal działało: http://codepen.io/chris0/pen/MbWYEg –

Powiązane problemy