Google Marker API. Lets play! Level 0 — custom marker icon

Recently I spent quite a lot of time playing with Google Marker API. I am going to write three short articles to cover common questions: custom marker icon, marker with dynamic label and custom info window (the popup you see after clicking on a marker). Hope they will save time at least for someone. Let’s start with the easiest one — custom marker icon.

It is a very common issue to have a custom, not standard red, marker. Quick googling will bring you to the official documentation. It’s pretty simple. You have an icon (I borrowed one here). An icon is an image. It can be any format you like — PNG, JPG, SVG, etc. Important note — you need to host it somewhere. There are two possible ways to set an icon: pass its URL directly as a marker property or use an Icon object. The example at Google Maps API covers only the first solution. But the second one gives you a bunch of interesting options. So, lets pass the icon as a String:

var marker = new google.maps.Marker({
  icon: "http://image.flaticon.com/icons/svg/252/252025.svg",
  map: map, // specifies the Map on which to place the marker
  position: markerPosition // specifies the location of the marker
});

In result we will see this:

Not exactly what we want to get, right? Google tries to size image automatically (at least API says it). The issue is if you want to pass an icon as a String you should be aware of image size and proportions. But, hopefully, Google Marker API give us another more complex solution, which handles this issue. So, if the image you want has high resolution or it is a part of a larger image in a sprite, you should pas an icon as an object of type Icon:

var markerIcon = {
  url: 'http://image.flaticon.com/icons/svg/252/252025.svg',
  scaledSize: new google.maps.Size(60, 60),
  origin: new google.maps.Point(0, 0), // used if icon is a part of sprite, indicates image position in sprite
  anchor: new google.maps.Point(20,40) // lets offset the marker image
};

var marker = new google.maps.Marker({
  icon: markerIcon,  
  position: markerPosition,
  map: map
});

Now it looks great!

Nice custom marker on you map, enjoy! An Icon object has several interesting properties, but I find ‘scaledSize’ as the most useful. Actually, API says you can use only it if you have separate image icon. By default, it sets origin at top left corner of your icon and anchor at bottom middle. But, what I noticed is that location of custom marker sometimes differs from a standard one. So, be careful. In my example I used property ‘origin’ to set my marker directly at that place where the standard marker appears if passing the same location:

The Codepen example if here. And see you tomorrow. We will breathe life into this marker ;)

Update: How to add label to your custom marker and style it, read here.

Thank you for staying with me until these words ❤ I like to chat, so looking forward to hearing from you. Have a nice day! Happy Google Map coding!