2013-01-13 40 views
1

我想使用gmaps.js遍歷全球50多個地址並向地圖添加標記。感謝對另一個問題的很好的回答,我想我已經解決了這個問題。gmaps.js遍歷地址並添加標記

gmaps.js - loop through elements and add markers

總之使用有確切的答案(活生生的例子http://jsfiddle.net/w8bvR/3/)。

SCRIPT SIDE

var map = new GMaps({ 
    div: '#mapCanvas', 
    lat: 0, 
    lng: 52, 
    zoom: 13, 
    width: '600px', 
    height: '400px' 
}); 

var popupTemplate = '<div class="popupText"><h3>%1</h3><p>%2</p></div>'; 
var location = $('#location').text(); 

$('.blist p').find('br').replaceWith(', '); 

$(".blist").each(function() { 
    var title = $(this).find("h3").text(); 
    var address = $(this).find("p.address").text(); 
    GMaps.geocode({ 
     address: address, 
     callback: function(results, status) { 
      if (status == 'OK') { 
       var latlng = results[0].geometry.location; 
       map.setCenter(latlng.lat(), latlng.lng()); 
       map.addMarker({ 
        lat: latlng.lat(), 
        lng: latlng.lng(), 
        title: title, 
        infoWindow: { 
         content: popupTemplate.replace('%1',title).replace('%2',address) 
        } 
       }); 
      } 
     } 
    }); 
}); 

HTML SIDE

<div id="mapCanvas"></div> 
<h1 id="location">Phuket, Thailand</h1> 

<div class="blist"> 
    <h3>APK Resort</h3> 
    <p class="address">95 Ratchapratanusorn road<br>Kathu<br>Patong Beach 83150<br>Phuket<br></p> 
</div> 

<div class="blist"> 
    <h3>Patong Bay House</h3> 
    <p class="address">160/5 Phungmuang Sai kor Rd<br>Phuket<br>Patong Beach 83150<br>Kathu<br></p> 
</div> 

<div class="blist"> 
    <h3>Bel Aire Resort</h3> 
    <p class="adress">59/1-3 Sainamyen Rd Patong Kathu<br>Phuket<br>Patong Beach 8310<br>T<br></p> 
</div> 

但是由於某些原因,當我從我的MySQL獲取地址VIVA PHP和創造50+的只添加11個標記映射不管按照什麼順序或從我創建的mysql中選擇。我有點失落,爲什麼它會將自身限制爲11個,因爲Google聲稱在這個級別上至少沒有限制。任何幫助讚賞。

看到我從MySQL/PHP中獲取我確信還有一種更優雅的方式,但也沒有專家。

+0

[OVER \ _QUERY \ _LIMIT在Google Maps API v3中的可能重複:如何在Javascript中暫停/延遲以減慢速度?](http://stackoverflow.com/questions/11792916/over-query-limit -in-google-maps-api-v3-how-do-i-pause-delay-in-javascript-to-sl) – geocodezip

回答

1

問題是代碼不檢查OVER_QUERY_LIMIT錯誤並正確處理它。如果不處理這種情況,您將從地理編碼服務中收到約10條回覆(如您所見)。

+0

謝謝你的提示,將會看着那個方向 – organizer