Abhi_6 0 Newbie Poster

I am getting the longitude and latitude from AJAX and giving me more 120 on every page load. Marking the result locations into google map and using browser key. It was working fine, but suddenly it stopped working and getting 'This site has exceeded its daily quota for maps. If you are the creator of this site, please visit the documentation to learn more' error plus page hangs. It has been more than 24 hours, but the problem remains same. I tried to found out the solution but no luck and I changed new API key.

JS files:

<script src="http://open.mapquestapi.com/sdk/js/v7.2.s/mqa.toolkit.js?key=my-browser-key"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=geometry"></script>

JS code:

var map;
var infowindow;
var service;
var address     = "United Kingdom";
var latitude    = '51.497801';
var longitude   = '-0.065918';
var myLatlng    = new google.maps.LatLng(latitude,longitude); 
var geocoder    = new google.maps.Geocoder();
var markers     = '';
function initialize() {
    var bounds = new google.maps.LatLngBounds();
    var getTeamsUrl = Routing.generate('getAllUsers',{});
    $.ajax({
        url      : getTeamsUrl,
        type     : 'POST', 
        data     : 'type=getAllUsers',
        datatype : 'json',
        async    : false,
        success : function(data){
            markers = JSON.parse(data);
        }
    });
    console.log(markers.length);
    myLatlng = new google.maps.LatLng(latitude,longitude);  /* latitude and longitude*/
    var mapOptions = {
        zoom: 7,
        center: myLatlng,
        panControl:true,    
        draggable: true,
        zoomControl:true,
        scrollwheel: false,
        scaleControl:false,
        rotateControl:true,
        mapTypeControl:true,    
        streetViewControl:true,
        overviewMapControl:true,
        navigationControl: true,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    for( i = 0; i < markers.length; i++ ){
        name      = markers[i]['title']+' '+ markers[i]['first_name']+' '+ markers[i]['surname'];
        address   = markers[i]['address_1']+' '+ markers[i]['address_2']+', '+ markers[i]['city']+', '+ markers[i]['postcode'];
        longitude = markers[i]['longitude'];
        latitude  = markers[i]['latitude'];
        addMarkerOnMapUsingLatLng(latitude, longitude, name, address, '', 1);
    }

}

function addMarkerOnMapUsingLatLng(lat,lng, name, address, icon, selected){
    if(lat!='' && lng!=''){
        myLatlng = new google.maps.LatLng(lat,lng);
    }
    var mapOptions = {
        zoom: 7,
        center: myLatlng,
        panControl:true,    
        draggable: true,
        zoomControl:true,
        scrollwheel: false,
        scaleControl:false,
        rotateControl:true,
        mapTypeControl:true,    
        streetViewControl:true,
        overviewMapControl:true,
        navigationControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.LEFT_BOTTOM
        },
        streetViewControlOptions: {
            position: google.maps.ControlPosition.LEFT_BOTTOM
        },
        mapTypeId:google.maps.MapTypeId.ROADMAP
    }
    if(selected==1){
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        map.setCenter(myLatlng);
    }
    var infowindow = new google.maps.InfoWindow({ 
        content: address,
        size: new google.maps.Size(150,50)
    });
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map, 
        title: name/*,
        icon : icon*/
    }); 
    google.maps.event.addListener(marker, 'click', function(){
        /* infoWindow.setContent(address); */
        infowindow.open(map, marker);
    });
}

Dani AI

Generated

— the most likely immediate cause is that the Maps JavaScript API is being used without a valid/billing-enabled Google API key (or with a key that has the wrong restriction). When the Maps JS requests hit a quota limit the library returns the “This site has exceeded its daily quota for maps” / OverQuota error and the map stops rendering. (developers.google.com)

Actionable checks (in order): confirm the page’s Google Maps script request includes a Google API key created in the Google Cloud Console (a browser key with HTTP-referrer restrictions for client-side maps); verify the Maps JavaScript API is enabled for that project; make sure billing is attached if the project needs higher usage; and if server-side web services (Geocoding, Places web service, etc.) are used, create a separate server key restricted by IP. These are common causes of quota/authorization failures. (developers.google.com)

Code-level fixes and performance notes tied to the posted code: don’t recreate the map inside the marker helper — create the map once, then add markers (re-creating the map per marker can lead to extra map loads and a hung UI). Avoid synchronous AJAX (async:false) because it blocks rendering. If geocoding is used in a loop, throttle requests or use the Maps JS Geocoder client-side to avoid OVER_QUERY_LIMIT; for large marker sets use clustering. Use the browser DevTools Network + Console to inspect the maps/api/js requests (confirm the key is present) and the Cloud Console Quotas/Usage pages to see which API is actually exhausted. (developers.google.com)

Quick checklist: (1) ensure the Google Maps script include contains a valid Google API key (not a MapQuest key), (2) create/use the right key type and restrict by referrer/IP, (3) enable Maps JS API and attach billing if required, (4) create a separate server key for web-service calls, (5) initialize the map once and remove blocking sync calls. After those checks the OverQuota error will normally resolve or point to which API needs quota increases. (developers.google.com)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.