techex 2017: Google Maps Javascript API Tutorial is Rubbish

I am working on creating a Google-maps based project. As such, I was using the Google Maps Javascript API Tutorial to activate an API key and create a 'Hello World' style test script.

I continuously received one of the following errors:

Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v3 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: https://developers.google.com/maps/documentation/javascript/tutorial#api_key

Google has disabled use of the Maps API for this application. See the Terms of Service for more information: http://www.google.com/intl/en-US_US/help/terms_maps.html.

Having not used the API to make a single call, the notion that I had somehow violated the Google TOS was particularly infuriating, as was the notion that I had not enabled the Google Maps API, which I had done, as outlined in the API Tutorial:

The issue, at least in my case, turned out to be the sample code that Google provides in the same tutorial. The sample is as follows:



<html>
  <head>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY" type="text/javascript">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: { lat: -34.397, lng: 150.644},
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
<div id="map-canvas">
</div>
</body>
</html>

In the script above, the developer is prompted to replace API_KEY with their actual API Key. However, this will cause a TOS violation if you have followed the Tutorial. To resolve the issue, add the following to your API Key:

&sensor=false

So the entire line of script, with an actual API Key, would look something like this:

<script src="https://maps.googleapis.com/maps/api/js?key=21a300d4a9a2cf55e4ffac1750acbc01
&sensor=false" type="text/javascript">

This will allow the map to render as described in the tutorial.

techex 2017

Wednesday, February 4, 2015

Google Maps Javascript API Tutorial is Rubbish

No comments:

Post a Comment