Google Maps Marker as Image

• andreasb

• September 25, 2014 at 6:41 pm

How can i change the google map standard marker with an self-made icon/marker?
anybody an idea?

• emiel

• November 4, 2014 at 2:42 am

Did you ever find a solution for this andreasb? Thanks in advance for sharing it here if you did 🙂

• andreasb

• November 4, 2014 at 3:46 am

not yet.

• thomask

• November 4, 2014 at 3:59 am

Based on the google maps acf example-code (and google maps api), I would suggest to change this:

// create marker
var marker = new google.maps.Marker({
position : latlng,
map : map
});

to something like this:

// create marker
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon: ‘http://example.com/my_icon.png’
});

• andreasb

• November 4, 2014 at 4:38 am

Hi,
thx. doesn`t work. shows an empty map.
regards
andreas

• thomask

• November 4, 2014 at 11:49 pm

Works fine here.

Here a running version of the acf example-code with a custom “A” image as icon/marker: http://jsfiddle.net/0zL3mt4z/

The only change compared to the example-code is the added ‘icon’ parameter.

• andreasb

• November 6, 2014 at 1:02 am

Hi,
works fine. thx.

If like to style the map e.g.:

function render_map( $el ) {

// var
var $markers = $el.find(‘.marker’);

// vars
var args = {
zoom : 4,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP,

styles: [{“stylers”:[{“lightness”:5},{“gamma”:1.2},{“saturation”:-80},{“visibility”:”on”},{“weight”:0.1},{“hue”:”#ddd”}]}]};

• debendra

• October 28, 2015 at 1:13 pm

Thank you Thomask, It worked for me.