使用JavaScript v3爲Google Map添加多個API API

我一直堅持這幾天。我遇到了使用JavaScript API的v3向地圖添加多個點的問題。使用JavaScript v3爲Google Map添加多個API API

我對SO閱讀this thread和this thread也this thread，我已經抓了幾個錯誤，並做出了一些改變，但我仍然不能完全得到什麼，除了顯示在map_canvas HTML文本。

任何幫助，非常感謝。謝謝。

當前的代碼迭代：

<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>

來源

2011-07-08 gtcharlie

你可能還會考慮[gis.se] – jcolebrand

的問題是在這裏：

info_window.open(map, this);

它應該是：

info_window.open(google_map, this);

，因爲沒有可變於此而得名map。這裏的工作版本：http://jsfiddle.net/nrabinowitz/2DBXY/

如果您還沒有這樣做，請嘗試使用Firebug或Chrome控制檯等工具 - 調試Javascript幾乎是不可能的，沒有一個。

來源

2011-07-08 22:03:16 nrabinowitz

WOW。它總是這些小事情不是嗎？！真的，謝謝。 – gtcharlie

Upvoted現在我有足夠的信譽。 – gtcharlie

奇怪的是。我將上面的代碼發佈在codepen中，它的工作原理與map和google_map一樣。我拿出了'info_window.open（map，this）;'這一行，它仍然工作： http://codepen.io/chris0/pen/MbWYEg –

使用JavaScript v3爲Google Map添加多個API API

回答

相關問題