Skip to content

Map Icons

Jump to bottom
Jeffrey Kemp edited this page Aug 11, 2020 · 19 revisions
Clone this wiki locally

The default marker is drawn with the default red pin with a dot, i.e.:

Google default red pin https://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png

This can be changed for each pin by supplying an absolute URL to an icon. The URL may be to an image uploaded in your Static Application Files, on your web server, or from elsewhere. To reduce the volume of data loaded via the query, you may set a single "base path" to be used for all the icons, so that the query only needs to specify the filename.

For more customisation, you may instead supply a JavaScript function that modifies each marker in almost any way you like, using whatever logic you require. For example, you might change the colour, icon image, or opacity of each marker depending on what data it represents. For more details on the structure of the marker icon object, refer to the Google Maps API - Marker Icon.

There is a Google API that generates icons with a number of options that can be adjusted. The url looks like this and you can adjust the parameters to adjust the look and content of the icon:

https://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png
    &text=Z
    &psize=11
    &font=fonts/Roboto-Regular.ttf
    &color=ff333333
    &ax=44
    &ay=48
    &scale=1

https://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png

https://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-blue.png

https://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=0.5

https://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=1.5

Note that the plugin gives an easier way of supplying a single letter or number to show in the pin, via the label column in your query.

The following are some icons useful for maps. Their availability is not guaranteed so if you are relying on a particular icon you should upload it to your instance instead of referring to these sources directly.

Examine the source of this page to see the URLs used for these examples. Make sure to use the URL listed in the data-canonical-src attribute, not the img src (because that's just a cache built by github).

https://maps.google.com/mapfiles/ms/icons/

blue-dot.png green-dot.png ltblue-dot.png orange-dot.png pink-dot.png purple-dot.png red-dot.png yellow-dot.png blue-pushpin.png grn-pushpin.png ltblu-pushpin.png pink-pushpin.png purple-pushpin.png red-pushpin.png ylw-pushpin.png

blue.png green.png lightblue.png orange.png pink.png purple.png red.png yellow.png

POI.png arts.png bar.png bus.png cabs.png campfire.png campground.png caution.png coffeehouse.png convienancestore.png cycling.png dollar.png drinking_water.png earthquake.png electronics.png ferry.png firedept.png fishing.png flag.png gas.png golfer.png grocerystore.png helicopter.png hiker.png homegardenbusiness.png horsebackriding.png hospitals.png hotsprings.png info.png landmarks-jp.png lodging.png marina.png mechanic.png motorcycling.png movies.png parkinglot.png pharmacy-us.png phone.png picnic.png plane.png police.png postoffice-jp.png postoffice-us.png question.png rail.png rangerstation.png realestate.png recycle.png restaurant.png sailing.png salon.png shopping.png snack_bar.png snowflake_simple.png sportvenue.png swimming.png toilets.png trail.png tree.png truck.png water.png waterfalls.png webcam.png wheel_chair_accessible.png

https://maps.google.com/mapfiles/ms/micons/

camera.png euro.png fallingrocks.png info_circle.png man.png partly_cloudy.png rainy.png ski.png subway.png sunny.png tram.png volcano.png woman.png yen.png

Google Earth/Maps Icons https://maps.google.com/mapfiles/kml/shapes/

Google Charts Dynamic Icons https://chart.googleapis.com/chart

Icons Archive https://icons.iconarchive.com/icons/icons-land/vista-map-markers/

Resources