2011-07-08 16 views
15

Me he quedado atrapado en esto por unos días. Tengo problemas para agregar varios puntos a un mapa con la v3 de la API de Javascript.Agregar varios puntos a Google Map con Javascript v3 API

leí this thread y this thread y también this thread el SO y yo he cogido algunos errores e hizo algunos cambios, pero todavía no puedo conseguir nada para mostrar excepto por el texto HTML en map_canvas.

Cualquier ayuda es muy apreciada. Gracias.

iteración actual de código:

<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

También puede considerar [gis.se] – jcolebrand

Respuesta

15

El problema es aquí:

info_window.open(map, this); 

Debería ser:

info_window.open(google_map, this); 

porque no hay ninguna variable llamada aquí map. Versión de trabajo aquí: http://jsfiddle.net/nrabinowitz/2DBXY/

Si aún no lo hace, intente utilizar una herramienta como Firebug o la consola de Chrome: la depuración de Javascript es casi imposible sin una.

+0

WOW. Siempre son las pequeñas cosas ¿no? En serio, gracias. – gtcharlie

+1

Subido de nivel ahora que tengo suficiente credibilidad. – gtcharlie

+0

Por extraño que parezca. Publiqué el código anterior en un codepen y funcionó como está con map vs. google_map. Saqué completamente la línea 'info_window.open (map, this);' y todavía funcionó: http://codepen.io/chris0/pen/MbWYEg –

Cuestiones relacionadas