status code OVER_QUERY_LIMIT Google Maps API

Question

I have 20 addreses to geocode. They are all valid. When I try to geocode them, I get the OVER_QUERY_LIMIT. Also I put markers on the map, and everytime I get different number of markers on the map. I found this OVER_QUERY_LIMIT in Google Maps , but it didn't help me. Also after geocodding markers array have length 0 and i aont know why. This html code:

 <div class="address-list">
                <ul>
                    <li data-address='ТРЦ Квадрат, бульвар Перова, 36, Киев, город Киев'>ТРЦ Квадрат, бульвар Перова 36</li>
                    <li data-address='Дніпровська набережна, 33'> ТЦ Аркадия, Днепровская Набережная 33 </li>
                    <li data-address='Срібнокільська, 3г, Київ'>  ТЦ ИнСилвьер, Срибнокольская 3г</li>
                    <li data-address="вулиця Лук'янівська, Київ"> ТЦ Квадрат, Белорусская 1</li>
                    <li data-address='проспект Генерала Ватутіна, 2, Київ, 02000'> ТЦ Скаймолл, проспект Генерала Ватутіна 2 </li>
                    <li data-address='вулиця Архітектора Вербицького 30а 30a, Київ, город Киев'> вулиця Архітектора Вербицького 30а</li>
                    <li data-address='Дніпровська набережна, 33, Київ, 02000'> Дніпровська набережна 33</li>
                    <li data-address='вулиця Михайла Гришка, 3а, Київ, 02000'> вулиця Михайла Гришка 3а</li>
                    <li data-address='вулиця Антоновича, 176, Київ, 03150'>ТРЦ Ocean Plaza, вулиця Антоновича 176</li>
                    <li data-address='вулиця Олександра Мишуги, 4, Київ'>ТЦ Пирамида, вулиця Олександра Мишуги 4</li>
                    <li data-address='вулиця Антоновича, 176, Київ, 03150'>ТРЦ Ocean Plaza, вулиця Антоновича 176</li>     
                    <li data-address='вулиця Олександра Архипенка, 6, Київ, 02000'>вулиця Мате Залки 6, Сильпо</li>
                    <li data-address='Бессарабська площа, Київ, 02000'>ТЦ Метроград, вулиця Красноармейская 13</li>
                    <li data-address='Спортивна площа, 1a, Київ, 01023'>ТЦ Гулливер, Спортивная 1а</li>
                    <li data-address='Спортивна площа, 1a, Київ, 01023'>ТЦ Гулливер, Спортивная 1а</li>
                    <li data-address='площа Льва Толстого, Київ, 01004'> ТЦ "Метроград", пл. Льва Толстого</li>
                    <li data-address='Майдан Незалежності, 1, Київ'>Пл. Майдан Независимости 1, ТЦ Глобус</li>
                </ul>
            </div>
            <div id="map">

            </div>

This is js code:

var map;
var markers=[];
var addreses=[];
var buf=[];
var geocoder;
var delay = 100;
var index = 0;

function initMap() {
    map = new google.maps.Map(document.getElementById("map"),{
        center: { lat: 50.448998, lng: 30.522364},
        zoom: 11    
    });
    geocoder = new google.maps.Geocoder();
}

 $(function(){
     buf = $('.address-list ul li');
     for(var i = 0; i < buf.length; i++){
        var data = $(buf[i]).data('address');
        addreses[i] = data;
     }

     nextAddress();

    $('.address-list ul li').hover(
        function(e){
            for (var i = 0; i < buf.length; i++){
                var addr = $(this).data('address');
                if(addreses[i] == addr){
                    var pos = markers[i].getPosition();
                    map.setCenter(pos);
                    break;
                }
            }
        }
    );
});

function geocodeAddress(addr, mark, next){
    geocoder.geocode({'address': addr}, function(results, status){
        if(status === google.maps.GeocoderStatus.OK){ 
            mark = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            mark = results[0].geometry.location;
        }else{
            console.log('Error occured!' + status);
            if(status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT){
                index--;
                delay++;
            }
        }
        console.log(markers.length);
        next();
    });
}

function nextAddress(){
    if(index < addreses.length){
        setTimeout(geocodeAddress(addreses[index], markers[index], nextAddress), delay);
        index++;
    }else{
        console.log("Markers done!!!" + markers.length);
    }
}

Answer 1

You are actually hitting 20 request at a time to geocode . The geocoder has quota and rate limits. you can geocode 10 locations without hitting the query limit (the actual number probably depends on server loading). The best solution is to delay when you get OVER_QUERY_LIMIT errors, then retry. Something like this

$(items).each(function(i, item){

setTimeout(function(){

geoLocate("address", function(myLatlng){
  ...value
});

}, 200);

}