CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3visual-refresh
leochab
leochab

Reputation: 1112

Google Map icons with VisualRefresh

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.

Upvotes: 39

Views: 20930

Answers (2)

77120
77120

Reputation: 915

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.

Upvotes: 100

Martin Schilliger
Martin Schilliger

Reputation: 838

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);
}

Upvotes: 11

Related Questions