How can i add a marker image icon on gmaps.js

Question

I am using GMaps.js for a WordPress page. But I want to change the marker icon there. They told to use $('<img/>').attr('src', url) .appendTo('#map');

My current Code `

var map;

$(document).ready(function(){
  map = new GMaps({
    el: '#map',
    lat: -12.043333,
    lng: -77.028333
  });

  map.addMarker({
    lat: -12.042,
    lng: -77.028333,
    title: 'Marker with InfoWindow',
    infoWindow: {
      content: '<p>HTML Content</p>'
    }
  });
});

Now how can I include a PNG icon as marker image there?

Answer 1

Go here: http://hpneo.github.io/gmaps/documentation.html#GMaps-addMarkers , search 'createMarker'.

Here it says that createMarkers accepts any options from google.maps.markerOptions. Follow this link: google.maps.markerOptions

It says 'icon' in the list. So add an icon property with the url to your image.

Right below createMarker is addMarker. It accepts the same parameters as createMarker.

This should get you going in the right direction.