CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
AJC
AJC

Reputation: 65

Can't get mouseover polygon to work with google maps - Uncaught Reference Error: google is not defined

New to coding and trying to build and application with google map feature utilizing polygons. Have seen this question asked a few times but cannot seem to identify my issue. The map initializes and polygons are created from defined locations. I get an "uncaught reference error: google is not defined" when trying to utilize event listeners I am using to try to change the style of the polygon when it is hovered on.

var map;

// Map Display options
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: {lat: 42.05, lng: -70.25},
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });

  // Define the LatLng coordinates for the polygon.   
  var cc_peaked_hill =  [
    {lat: 42.049803, lng: -69.970551},
    {lat: 42.048273, lng: -69.978790},
    {lat: 42.043684, lng: -70.046082},
    {lat: 42.043684, lng: -70.058441},
    {lat: 42.056940, lng: -70.085907},
    {lat: 42.070194, lng: -70.118179},
    {lat: 42.079369, lng: -70.156631},
    {lat: 42.049803, lng: -69.970551}
  ];

  // Construct the polygon.
  var cc_peaked_hill_billsPollygon = new google.maps.Polygon({
    paths: cc_peaked_hill,
    strokeColor: '#F7F8FF',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: '#4562A8',
    fillOpacity: 0.45,
    editable: false
  });

  // Build the Polygons
  polygons = cc_peaked_hill_billsPollygon.setMap(map);

  //Listen for when the mouse hovers over the polygon.
  google.maps.event.addListener(polygons, 'mouseover', function (event) {
      // Within the event listener, "this" refers to the polygon which
      // received the event.
      this.setOptions({
          strokeColor: '#00ff00',
          fillColor: '#00ff00'
      });
  });

}

For some reason, I am getting the following error:

Uncaught Reference Error: google is not defined

How do I fix this?

Upvotes: 0

Views: 443

Answers (1)

duncan
duncan

Reputation: 31912

The problem is you firstly do this:

polygons = cc_peaked_hill_billsPollygon.setMap(map);

Which is really just setting the map property on your polygon (in fact setMap doesn't return anything). It doesn't give you a polygon. You already have that, in the cc_peaked_hill_billsPollygon variable.

So when you try and setup the event listener, just use that.

And in fact you don't even need to call setMap. Simply assign the map property at the time you create the polygon.

// Construct the polygon.
  var cc_peaked_hill_billsPollygon = new google.maps.Polygon({
    paths: cc_peaked_hill,
    strokeColor: '#F7F8FF',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: '#4562A8',
    fillOpacity: 0.45,
    editable: false,
    map: map   // Does the equivalent of `setMap(map)`
  });

  //Listen for when the mouse hovers over the polygon.
  google.maps.event.addListener(cc_peaked_hill_billsPollygon, 'mouseover', function (event) {
      // Within the event listener, "this" refers to the polygon which
      // received the event.
      this.setOptions({
          strokeColor: '#00ff00',
          fillColor: '#00ff00'
      });
  });

PS: there's an even neater way you can add your event listener. Just do:

  cc_peaked_hill_billsPollygon.addListener('mouseover', function (event) {
      // Within the event listener, "this" refers to the polygon which
      // received the event.
      this.setOptions({
          strokeColor: '#00ff00',
          fillColor: '#00ff00'
      });
  });

Upvotes: 1

Related Questions