CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Gowri
Gowri

Reputation: 16845

google map place search marker icon styling

When I search I google map, I am getting places marker icon with rounded red background as in below screenshot. I am trying to create the marker with exact same style in my application. I am using google map API for javascript v3.

Here is code to create the google map marker from the results of places api results.

        var marker = new google.maps.Marker({
          map: $this.map,
          position: place.geometry.location,
          icon: {
              url: place.icon,
              size: new google.maps.Size(18,18),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(18, 18),

            }

        });

enter image description here

Live Example in google map

Upvotes: 1

Views: 2427

Answers (1)

RaisoMos
RaisoMos

Reputation: 159

From the documentation of google maps,
you can specify the marker icon with url to your image.

https://developers.google.com/maps/documentation/javascript/custom-markers

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
  parking: {
    icon: iconBase + 'parking_lot_maps.png'
  },
  library: {
    icon: iconBase + 'library_maps.png'
  },
  info: {
    icon: iconBase + 'info-i_maps.png'
  }
};

function addMarker(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    icon: icons[feature.type].icon,
    map: map
  });
}

Upvotes: 2

Related Questions