gmaps.js遍历地址并添加标记

Question

I'd like to use gmaps.js to loop through 50+ addressed worldwide and add markers to a map. Thanks to a great answer to another question I thought I had it solved.

gmaps.js - loop through elements and add markers

In short using the exact answer there (live example 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>

However for some reason when I fetch the addresses viva PHP from my mysql and create the 50+ 's it only add 11 markers to map no matter what order or select from the mysql that I create. I'm sort of lost to why it would limit itself to 11 as googles API claims there are no limits at least on that level. Any help appreciated.

Seeing I'm fetching from mysql/php I'm sure there are a more elegant way as well, but no expert on either.

Answer 1

The issue is the code doesn't check for the OVER_QUERY_LIMIT error and handle it appropriately. Without handling that case you will get approximately 10 responses from the Geocoding Service (as you are seeing).