Google Map icons with VisualRefresh

Question

How can I use the "new" default icons for Google maps when using VisualRefresh setting?

The default icon is: http://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png&scale=1

Former addresses looked like this: http://maps.google.com/mapfiles/marker_green.png, but using the new and old icons in the same map doesn't look good.

What is VisualRefresh setting? I never used this. Isn't kind of default now? — Tomas, Mar 05 '14 at 09:04
Yes it is the default behavior since November 2013. The setting is `google.maps.visualRefresh: true` even though at the time I wrote that piece of code I used `disableDefaultUI: true` because this setting was not available yet (if I recall right) — leochab, Mar 05 '14 at 09:41
This question isn't asking for a recommendation of a favourite resource. Google Maps changed their default marker icon style. The commonly-used icons they previously used look different, and it would be useful to know URLs for a range of the new-style icons. — duncan, Oct 31 '14 at 11:22
Answered [here](https://stackoverflow.com/a/44332827/3003133), with: https://github.com/Concept211/Google-Maps-Markers — Kevin, Jun 02 '17 at 15:48

77120 · Accepted Answer · 2017-02-10T12:19:04.500

99

I don't have an official list, but did do some research.

https://mt.google.com/vt/icon/text=A&psize=16&font=fonts/arialuni_t.ttf&color=ff330000&name=icons/spotlight/spotlight-waypoint-b.png&ax=44&ay=48&scale=1

Use that URL and you can easily change the text, size,font and color to your preference,
however the color parameter will only change the color of the text. but if you change waypoint-b.png to waypoint-a.png you get a green marker.

Icon list:

Markers:

Places:

Traffic:

Miscellaneous:

Look at the URLs and notice the L which can also be S or M, notice the _v_ and _search_ in the names.
At the transit icons you can change large to tiny, mini, and small.

There is probably more. but thats all I have found so far.

edited Feb 10 '17 at 12:19

answered Aug 30 '13 at 11:11

77120

865
1
14
27

10

It's a shame that [Google is not able to provide official API](http://stackoverflow.com/q/11318672/684229) for the icons, [since ever](http://stackoverflow.com/questions/8248077/google-maps-v3-standard-icon-shadow-names-equiv-of-g-default-icon-in-v2?rq=1). – Tomas Mar 05 '14 at 09:10
1

That's great research! Did you get these icons through just trawling through the inspector and network panels, or some other way? – davestewart Jan 03 '15 at 10:35
1

Here are custom icons that you can generate quickly via a simple .vbs script. I also included a large pre-generated set that you can use immediately with multiple color options: https://github.com/Concept211/Google-Maps-Markers – Concept211 Aug 04 '15 at 19:35
2

`&scale=1` can be increased to `&scale=2`, `&scale=3`, or `&scale=4` for retina displays aka High DPI displays. – François Feb 01 '16 at 22:35
Google Maps now use a composition of multiple icons layers: https://www.google.com/maps/vt/icon/name=assets/icons/transit/quantum/container_shadow-1-small.png,assets/icons/transit/quantum/container-1-small.png,assets/icons/transit/quantum/train-1-small.png&highlight=0,b0ff,ffffff?color=ff000000&scale=2 – mems Mar 26 '17 at 16:20

score 11 · Answer 2 · edited Oct 15 '13 at 15:05

According to the answer of «77120» I've used the following:

http://mt.google.com/vt/icon?psize=27&font=fonts/Roboto-Bold.ttf&color=ff135C13&name=icons/spotlight/spotlight-waypoint-a.png&ax=43&ay=50&text=•

But, well, it's not the best way, though it works…

So in the end my code looks like:

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(46.951081, 7.438637),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

    var marker = new google.maps.Marker({
        icon: {
            url: 'http://mt.google.com/vt/icon?psize=27&font=fonts/Roboto-Bold.ttf&color=ff135C13&name=icons/spotlight/spotlight-waypoint-a.png&ax=43&ay=50&text=•&scale=1'
        },
        position: new google.maps.LatLng(46.951081, 7.438637),
        title:"My Custom Marker",
        animation: google.maps.Animation.DROP
    });

    // To add the marker to the map, call setMap();
    marker.setMap(map);
}

Google Map icons with VisualRefresh

2 Answers2

Icon list:

Linked