CODEWITHSUNDEEP
javascriptgoogle-maps
HMR
HMR

Reputation: 1

Google Maps API - InfoWindow not opening with custom marker icon

I've spent a few days trying to fix this to no avail. Any help would be appreciated.

I have a very simple Google map with one marker which when clicked zooms in and displays an infoWindow. My problem is that when I replaced the standard marker with a custom image marker, it zooms in but the infoWindow fails to appear. I've been using the Google API doco and a bit of cut & paste to get this. 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-22.062160, 144.142205);
  var mapOptions = {
     zoom: 4,
     mapTypeId: google.maps.MapTypeId.HYBRID,
     center: myLatlng
  };

var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var image = 'images/cccMap.png';
  var myLatLng = new google.maps.LatLng(-22.062160, 144.142205);
  var cccMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image,
      title: 'Click to zoom to Orielton, Crown Cattle Company',
      animation: google.maps.Animation.DROP
  })

var infowindow = new google.maps.InfoWindow({
    content:"<h1>Orielton</h1><p>Welcome to the center of Queensland.</p><p>View <a href=\"https://www.facebook.com/helen.robertson.1420354/photos\">Photos</a> or <a href=\"https://www.youtube.com/channel/UC-5HtaAWdumQLJj6vILBCiQ/videos\">Videos</a></p>",
    maxWidth: 200
  });

var cloudLayer = new google.maps.weather.CloudLayer();
    cloudLayer.setMap(map);

google.maps.event.addListener(cccMarker, 'click', function() {
    map.setZoom(15);
    map.setCenter(marker.getPosition());
    infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

I'm sure it's something simple, but I could really use the help. Cheers.

Upvotes: 0

Views: 1278

Answers (2)

Anto Jurković
Anto Jurković

Reputation: 11258

You did it almost right. marker was undefined in click event listener:

google.maps.event.addListener(cccMarker, 'click', function() {
    map.setZoom(15);
    map.setCenter(marker.getPosition());
    infowindow.open(map,marker);
  });
}

Change your event listener to:

google.maps.event.addListener(cccMarker, 'click', function() {

    map.setZoom(15);
    map.setCenter(cccMarker.getPosition());
    infowindow.open(map, cccMarker);
  });
}

Here is the whole code at jsbin. Note: you will not see the pointer icon there because it is on my system and I do not know how to provide it. But you have the code to compare.

And here is the result from my system: enter image description here

Upvotes: 1

A.Kalkhoff
A.Kalkhoff

Reputation: 146

Your Code:

google.maps.event.addListener(cccMarker, 'click', function() {
   map.setZoom(15);
   map.setCenter(marker.getPosition());
   infowindow.open(map,marker);
});

You are attempting to assign a marker "cccMarker" as first parameter, but it is assigned (as properly attempted) in the line infowindow.open(map,marker); – remove your first parameter of addListener() and properly assign it as "cccMarker" (you wrote "marker") in infowindow's open().

It should look like:

google.maps.event.addListener('click', function() {
   map.setZoom(15);
   map.setCenter(marker.getPosition());
   infowindow.open(map,cccMarker);
});

This way it should work properly.

Upvotes: 0

Related Questions