CODEWITHSUNDEEP
google-maps-api-3google-places-api
Amanda Ki
Amanda Ki

Reputation: 13

Customize Google Places Map API "icon" InfoWindows

I am having trouble customizing the "clicked" infowindows in the google places API. I am able to use the places api to find locations and to customize the searched infoWindows (image 1) but I cannot seem to figure out how to customize the infoWindows launched by the places icons (image 2).

I apologize, part of my problem is I don't know what those specific infoWindows are called and if I did, I might be able to search for the solution. It seems most questions on this site are related to customizing the searched infoWindow content and I have had success doing that.

Searched Customized InfoWindow (image 1)

The InfoWindow that I want to customize and is launched by icons on the map (image 2)

Upvotes: 1

Views: 302

Answers (1)

geocodezip
geocodezip

Reputation: 161384

Those are called clickableIcons. From the documentation

clickableIcons | Type: boolean
When false, map icons are not clickable. A map icon represents a point of interest, also known as a POI. By default map icons are clickable.

and:

getClickableIcons() | Return Value: boolean
Returns the clickability of the map icons. A map icon represents a point of interest, also known as a POI. If the returned value is true, then the icons are clickable on the map.

To control the InfoWindow, stop the default one from being opened, as described in the IconMouseEvent documentation:

google.maps.IconMouseEvent object specification

This object is sent in an event when a user clicks on an icon on the map. The place ID of this place is stored in the placeId member. To prevent the default info window from showing up, call the stop() method on this event to prevent it being propagated. Learn more about place IDs in the Places API developer guide.

proof of concept fiddle

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var iw = new google.maps.InfoWindow();
  google.maps.event.addListener(map, 'click', function(evt) {
    evt.stop()
    if (evt.placeId) {
      console.log(evt.placeId);
      iw.setContent(evt.placeId);
      iw.setPosition(evt.latLng);
      iw.open(map);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map_canvas"></div>

Upvotes: 1

Related Questions