Google map showing NetworkError: 403 Forbidden - http://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent

Question

I was using Google map with one of my application.I had my markup like this

<div>
  <label>Property Location</label>
  <input class="text-input" type="text"  name="property_location" id="property_location" value=""/>
</div>

I am using gmap3 to show the google map.My js code for showing map is like his

jQuery(document).ready(function() {
  jQuery('#property_location').blur(function() {
    var the_address = jQuery(this).val();
    var geocoder = new google.maps.Geocoder();
    var latLng = geocoder.geocode({
      address: the_address
    }, function(results, status) {

  /// IF WE HAVE A RESULT
  if(status == google.maps.GeocoderStatus.OK) {
    lat = results[0].geometry.location.lat();
    lng = results[0].geometry.location.lng();
    jQuery('#latitude').val(lat);
    jQuery('#longitude').val(lng);

    jQuery(gMap).gmap3({
      get: {
        name: 'marker',
        all: true,
        callback: function(objs) {
          jQuery.each(objs, function(i, obj) {
            obj.setMap(null);
          })
        }
      },
      map: {
        options: {
          zoom: 10,
          center: new google.maps.LatLng(lat, lng)
        }
      },
        marker: {
          values: [{ latLng:[lat, lng] }],
          //jQuery(console.log(values));
          options: {
            draggable: true,
            icon: new google.maps.MarkerImage(
             "http://gmap3.net/skin/gmap/magicshow.png",
             new google.maps.Size(32, 37, "px", "px")
           ),
          },
          events: {
            mouseup: function(marker, event, context) {
              //// GETS MARKER LATITUDE AND LONGITUDE
              var thePos = marker.getPosition();
              var theLat = thePos.jb;
              var theLng = thePos.kb;
              jQuery('#latitude').val(theLat);
              jQuery('#longitude').val(theLng);
           },
           dragend: function(marker, event, context) {
              var thePos = marker.getPosition();
              //console.log(thePos);
              var theLati = thePos.ob;
              var theLngi = thePos.pb;
              jQuery('#latitude').val(theLati);
              jQuery('#longitude').val(theLngi);

            jQuery(this).gmap3({
              getaddress:{
                latLng:marker.getPosition(),
                callback:function(results){
                  var map = $(this).gmap3("get"),
                  infowindow = $(this).gmap3({get:"infowindow"}),
                  content = results && results[1] ? results && results[1].formatted_address : "no address";

                  if (infowindow){
                    infowindow.open(map, marker);
                    infowindow.setContent(content);
                  } else {
                  jQuery(this).gmap3({
                  infowindow:{
                    anchor:marker, 
                    options:{content: content}
                  }
                });
              }
            }
          }
        });

           },

         }
       }
     });
      } else {
        alert('Could not find the latitude and longitude for the address '+the_address);
              }
      });
    });
});

Yesterday it was working fine. But when I checked today the map it showed me an error in console tab of firefox like this

NetworkError: 403 Forbidden - http://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent?

Can someone kindly tell me whats the issue here?Any help and suggestions will be really appreciable. Thanks

Answer 1

ohhh.. I was doing wrong. I had made download the google map code to my local server and was giving link to the downloaded files.It was the problem. I just removed that file and made direct link to the google map code and I got my map working finally...

Answer 2

I'm not sure if that's the reason, but there is an issue with your code:

var theLat = thePos.jb;
var theLng = thePos.kb;

and

var theLati = thePos.ob;
var theLngi = thePos.pb;

you try to access properties of the LatLngs( jb , kb , ob , pb ) that are used internally by the API, the names of these properties may change .

Use the methods lat() and lng() to retrieve latitude and longitude:

var theLat = thePos.lat();
var theLng = thePos.lng();

and

var theLati = thePos.lat();
var theLngi = thePos.lng();