Using a custom image marker on google static map?

Question

how to have custom image marker on google static map, i need url format:

this is what i have tried, but its having default marker image http://maps.google.com/maps/api/staticmap?center=25.3176452,82.97391440000001,&zoom=15&markers=25.3176452,82.97391440000001|25.3176452,82.97391440000001&path=color:0x0000FF80|weight:5|25.3176452,82.97391440000001&size=175x175&sensor=TRUE_OR_FALSE

DarckBlezzer · Answer 1 · 2018-10-02T16:43:02.717

55

This is what you want:

http://maps.googleapis.com/maps/api/staticmap?zoom=17&size=512x512&maptype=hybrid&markers=icon:http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico|34.052230,-118.243680

for a custom image, put the icon:url after of markers...

Format

icon:url|lat,lng

Example

icon:http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico|34.052230,-118.243680

a result of my example

For more information check google maps api, there are more information like size, markers position, center map, map type... etc.

https://developers.google.com/maps/documentation/static-maps/intro#MapTypes

*If the icon, img, don't appear it will be the size of image, try with another size,less than 64x64 px, format of image, "GIF, JPEG and PNG", the documentation recommend "PNG", if it doesn't appear check permision of image for public request(external request)...

edited Oct 02 '18 at 16:43

answered Mar 19 '16 at 17:31

DarckBlezzer

4,578
1
41
51

@PhilAndrews The docs says inline-defined SVG paths work, though. – Ariane Jul 13 '17 at 15:19
is there a way to customize the height and width of that image in the url? – caffeinescript Dec 07 '17 at 10:26
@caffeinescript yes, if you see in the url, of the api, there is an option of `size=512x512` width and height, in the url of api, search for size – DarckBlezzer Dec 07 '17 at 17:06
@DarckBlezzer i think thats the height and width of the image not the icon image no? I also saw that the max size is 64 * 64 on their docs – caffeinescript Dec 08 '17 at 06:37
@DarckBlezzer Is there a way to pass icon size? – Rohit Khatri Feb 17 '18 at 15:26
Absolutely brillant. – AllJs Aug 01 '18 at 00:24
2018, SVG's still do not work (tested with file url, not an inline path). – Luis Masuelli Sep 19 '18 at 19:42
And just try to make the icon url simplified. like this https://siteurl/images/marker.png not like this https://siteurl/somedirectory/another/inner/marker.png – Santosh Kumar Oct 02 '18 at 03:17

duncan · Answer 2 · 2016-09-14T13:25:38.490

According to the documentation you can specify custom icons like so:

markers=icon:...

e.g. amending your URL:

http://maps.google.com/maps/api/staticmap?center=25.3176452,82.97391440000001,&zoom=15&markers=icon:http://www.megaadresse.com/images/icons/google-maps.png|25.3176452,82.97391440000001&path=color:0x0000FF80|weight:5|25.3176452,82.97391440000001&size=175x175

Gives you:

PS: the sensor parameter is no longer required.

PPS: also you seemed to have specified the same coordinates twice in your markers parameter, so it was actually drawing two markers on the same location.

Haring10 · Answer 3 · 2015-02-13T09:14:40.137

1

You can add an image in the marker:

var campaign_map = new google.maps.Map(document.getElementById("campaign_map_canvas"), mapOptions);


    var selected_marker = new google.maps.Marker({
        position: position,
        map: campaign_map,
        icon: 'path/to/image'
    });

google.maps.event.trigger(campaign_map,'resize');

EDIT You can use the following:

https://maps.googleapis.com/maps/api/staticmap?size=480x480&markers=icon:path/to/image.png%257C996600%7Carea/you/want/

edited Feb 13 '15 at 09:14

answered Feb 13 '15 at 04:56

Haring10

1,517
1
19
37

6

That's using the JS API, not the Static Maps (the question was really mis-tagged, I've amended it) – duncan Feb 13 '15 at 09:01
Google maps is mainly JS? What exactly are you looking to do then? – Haring10 Feb 13 '15 at 09:03
2

The OP is referring to this API: https://developers.google.com/maps/documentation/staticmaps/ – duncan Feb 13 '15 at 09:04
I resized the png icon to 64*64,, and tested this &markers=icon:path/to/image.png,,,, dunno its not working,, any idea ?? and what is this ? %257C996600%7Carea/you/want/ ?? – Rageh Azzazy Jan 01 '21 at 23:03

score 0 · Answer 4 · answered Apr 21 '23 at 15:16

0

You must use a valid format. Taken from the official documentation:

Icon images may be in PNG, JPEG or GIF formats, though PNG is recommended

answered Apr 21 '23 at 15:16

henrywright

10,070
23
89
150

Using a custom image marker on google static map?

4 Answers4

Linked