-1

Problem: I am trying to use a sample of Google Map API v3 without an API key and it doesn't render. (It does render if I use a key).Anyone know why?

I decided to use this example (https://developers.google.com/maps/documentation/javascript/examples/polyline-simple)

In order to make it work without a key I replaced this script:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"></script>

with this other script

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

This is the code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

    </script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  </body>
</html>

But it doesn't render. Any idea what am I doing wrong? Thanks!

CHANTAL COX
  • 73
  • 2
  • 13
  • Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue. – geocodezip Dec 09 '15 at 16:28
  • In addition to a more fleshed out example, are you getting particular js errors? – Joshua Morgan Dec 09 '15 at 16:35
  • @Locke125 no particular errors. It is for sure the script about the google API key because when i replace that bit with a maps API key it works – CHANTAL COX Dec 09 '15 at 16:39
  • The [posted code renders a map for me without a key](http://jsfiddle.net/geocodezip/z0ancwy6/), did you really remove the `callback=initMap` from the API include? That would prevent the `initMap` function from ever being called and you would need to add code to call it on page load. – geocodezip Dec 09 '15 at 16:52

1 Answers1

0

Move the google maps script include into the head. It has to be included before you call it.

Call your initMap function to run the function you set up. The function initMap() has only been defined, but you haven't run it until then.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
    <div id="map"></div>
    <script>

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

initMap();
    </script>
</body>
</html>
Joshua Morgan
  • 678
  • 6
  • 18