Question

I’m using Gmap3-Jquery plugin to generate Google maps in one of my web application.
Currently i downloaded the Google API to my local drive and using the same in my HTML page.

However all the actions working fine for me, but after 3-4 days Google API stops working. If i download the fresh Google API from the same link to my local drive everything works fine. What may be the cause for such problem? Is it because of API Key? or is it because i downloaded to my local drive and referencing it from locally?

But I’m downloading Google maps API3, which doesn’t require API key.

Here is the code:

<script src="/site_media/js/google-map.js" type="text/javascript"></script>
<script type="text/javascript" src="/site_media/js/gmap3.js"></script> 
<script type="text/javascript">
    $(function(){
    $('#facility_map').gmap3(
        {    
      action:'init',
      options:{
                center:[26.327475, 50.20134],
            zoom: 18,
                mapTypeId: google.maps.MapTypeId.HYBRID
          }
        },      
            {
     action:'getRoute',
     options:{
               origin:['26.327475', '50.20134'], 
               destination:['{{facility.latitude}}', '{{facility.longitude}}'],
           travelMode: google.maps.DirectionsTravelMode.DRIVING
              },
     callback: function(results)
        { 
           if (!results) return;
           $(this).gmap3(
            { 
              action:'addDirectionsRenderer',
              options:{      
                            preserveViewport: true,         
                directions:results
                  }
            });
        }   
    },
           {
             action:'getDistance',
             options:{ 
                      origins:[['26.327475', '50.20134']], 
              destinations:[['{{facility.latitude}}', '{{facility.longitude}}']],
              travelMode: google.maps.TravelMode.DRIVING
             },
      callback: function(results)
      {
        var html = '';
        if (results)
            {
          for (var i = 0; i < results.rows.length; i++)
          {
         var elements = results.rows[i].elements;
         for(var j=0; j<elements.length; j++)
         {
            switch(elements[j].status)
           {
             case google.maps.DistanceMatrixStatus.OK:
                  html += results.destinationAddresses[j]+" -<b> "+elements[j].distance.text + ' (' + elements[j].duration.text + '</b>)<br />';
             break;
             case google.maps.DistanceMatrixStatus.NOT_FOUND:
              html += 'The origin and/or destination of this pairing could not be geocoded<br />';
             break;
             case google.maps.DistanceMatrixStatus.ZERO_RESULTS:
                  html += 'No route could be found between the origin and destination.<br />';
              break;
            }
        }
      } 
       } 
        else 
        {
           html = 'error';
         }
         $('#distance_msg').html("Distance From Rezayat Head Office Khobar to "+html);
       }
     }
    ); 
    });


</script>  

Answer 1

Are you saving the following file to your hard drive/web app:

http://maps.google.com/maps/api/js?sensor=false

If so, then the answer to your question…

or is it because i downloaded to my local drive and referencing it
from locally?

…is Yes.

That file you are referencing is cached, so it is always changing. I’ve never used the jQuery maps plugin that you mentioned above (it looks really cool, though!), but in looking at their API it mentions that you should call that script from Google, and not store it directly.

Also, remember, let Google handle that JS load and bandwidth for you, and try to stay away from storing that locally. The API could change, and with your cached version, your map might break because it’s not loading the most recent version.

I’ll also add one more thing: let Google load your jQuery, too – people using the site will have a better experience. This article will explain why more.