CODEWITHSUNDEEP
javascriptgoogle-maps
Amanda_Panda
Amanda_Panda

Reputation: 1186

Google Maps marker icon not loading (ReferenceError: google is not defined)

I'm working on a simple Google Maps web app, and I get

ReferenceError: google is not defined

when the page loads (referring to scaledSize: new google.maps.Size(20, 20) in the code) It was working a few days ago, but I'm just doing this for fun and didn't put it in version control, so I have no idea what changed. It should be loading a train icon.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>

      #map {
        height: 100%;
      }

      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      var position = {lat: 45.5100, lng: -122.6000};
      var gmarkers = [];
      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
      var lightRailicon = {
          url: iconBase+'rail.png',
          scaledSize: new google.maps.Size(20, 20)
      };

      function initMap() {
      var infowindow = new google.maps.InfoWindow();
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 45.5231, lng: -122.6765},
          zoom: 11
        });

        {% for vehicle in vehicles  %}

        var marker = new google.maps.Marker({
          position: {lat: {{ vehicle.latitude }}, lng: {{ vehicle.longitude }}},
          icon: lightRailicon,
          map: map

        });

        gmarkers.push(marker);
        infowindow =  new google.maps.InfoWindow({});
        marker.addListener('mouseover', function(){
           infowindow.setContent('<div style="width:400px; height:100px">'+"Position: "
            +'Latitude: ' +String({{ vehicle.latitude }})+' ' +'Longitude: '+String({{ vehicle.longitude}})+'<br/>'+
            "Destination: "+'{{ vehicle.signMessageLong }}'+
            '<br/>'+ "Vehicle ID: "+'{{ vehicle.vehicleID }}'+'<br/>'+
            "Is Congested: "+'{{ vehicle.inCongestion }}'+'<br/>'+
            "Delay: "+'{{ vehicle.delay }}'+'<br/>'+
            "Next Stop: "+'{{ vehicle.nextLocID }}'+'</div>');
           infowindow.open(map, this);
        });
        marker.addListener('mouseout', function(){
            infowindow.close();
        });
        {% endfor %}
      }


      function clearMarkers(){
           for(i=0; i<gmarkers.length; i++){
               gmarkers[i].setMap(null);
           }
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=Key&callback=initMap"
    async defer></script>
  </body>
</html>

Upvotes: 0

Views: 743

Answers (1)

geocodezip
geocodezip

Reputation: 161384

You are loading the API asynchronously, all code that depends on the API must be in the callback function (which executes after the API has finished loading or otherwise be known to execute after the API has loaded).

To address the problem, move the definition of the icon into the callback function.

function initMap() {
  var lightRailicon = {
    url: iconBase + 'rail.png',
    scaledSize: new google.maps.Size(20, 20)
  };

proof of concept fiddle

code snippet:

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script>
  var map;
  var position = {
    lat: 45.5100,
    lng: -122.6000
  };
  var gmarkers = [];
  var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';

  function initMap() {
    var lightRailicon = {
      url: iconBase + 'rail.png',
      scaledSize: new google.maps.Size(20, 20)
    };
    var infowindow = new google.maps.InfoWindow();
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 45.5231,
        lng: -122.6765
      },
      zoom: 11
    });

    //        {% for vehicle in vehicles  %}
    var vehicle = {
      latitude: 45.5100,
      longitude: -122.6
    }
    var marker = new google.maps.Marker({
      position: {
        lat: vehicle.latitude,
        lng: vehicle.longitude
      },
      icon: lightRailicon,
      map: map

    });

    gmarkers.push(marker);
    infowindow = new google.maps.InfoWindow({});
    marker.addListener('mouseover', function() {
      infowindow.setContent('<div style="width:400px; height:100px">' + "Position: " + 'Latitude: ' + '{{ vehicle.latitude }}' + ' ' + 'Longitude: ' + '{{ vehicle.longitude }}' + '<br/>' +
        "Destination: " + '{{ vehicle.signMessageLong }}' +
        '<br/>' + "Vehicle ID: " + '{{ vehicle.vehicleID }}' + '<br/>' +
        "Is Congested: " + '{{ vehicle.inCongestion }}' + '<br/>' +
        "Delay: " + '{{ vehicle.delay }}' + '<br/>' +
        "Next Stop: " + '{{ vehicle.nextLocID }}' + '</div>');
      infowindow.open(map, this);
    });
    marker.addListener('mouseout', function() {
      infowindow.close();
    });
    //        {% endfor %}
  }


  function clearMarkers() {
    for (i = 0; i < gmarkers.length; i++) {
      gmarkers[i].setMap(null);
    }
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

Upvotes: 1

Related Questions