CODEWITHSUNDEEP
androidgoogle-mapsgoogle-maps-markers
Sapir Melchin
Sapir Melchin

Reputation: 11

Custom google maps marker with user image inside the pin

I am trying to display users on a map, i have already implemented the map in the app, but now i am trying to make custom markers that display a users' photo inside the pin something like this: Custom markers , how can i accomplish this?

To clarify, what i am trying to do is display a bitmap inside a marker icon bitmap

Upvotes: 1

Views: 2062

Answers (1)

Pankaj
Pankaj

Reputation: 524

You can define an icon to show instead of the default marker image. Defining an icon involves setting a number of properties that determine the visual behavior of the marker. Below code should do the trick.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  var image = 'filePath' + 'usersPhoto.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image
  });
}

Check the Google Maps API for details https://developers.google.com/maps/documentation/javascript/examples/icon-simple#try-it-yourself

Upvotes: 2

Related Questions