How can I create numbered map markers in Google Maps V3?

by

Unfortunately it’s not very easy. You could create your own custom marker based on the OverlayView class (an example) and put your own HTML in it, including a counter. This will leave you with a very basic marker, that you can’t drag around or add shadows easily, but it is very customisable.

Alternatively, you could add a label to the default marker. This will be less customisable but should work. It also keeps all the useful things the standard marker does.

You can read more about the overlays in Google’s article Fun with MVC Objects.

Edit: if you don’t want to create a JavaScript class, you could use Google’s Chart API. For example:

Numbered marker: 

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000

Text marker: 

http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo

This is the quick and easy route, but it’s less customisable, and requires a new image to be downloaded by the client for each marker.

More Related Contents:

  1. Verify if a point is Land or Water in Google Maps
  2. Google Maps v3 – limit viewable area and zoom level
  3. Using Address Instead Of Longitude And Latitude With Google Maps API
  4. How to make cross-domain AJAX calls to Google Maps API?
  5. How to Display Multiple Google Maps per page with API V3
  6. Google maps API V3 – multiple markers on exact same spot
  7. Google Maps API autocomplete 2nd address fields on same page
  8. Google Maps API V3 : How show the direction from a point A to point B (Blue line)?
  9. Have just one InfoWindow open in Google Maps API v3
  10. Midpoint of route in google maps
  11. Maximum Lat and Long bounds for the world – Google Maps API LatLngBounds()
  12. Display world map with no repeats
  13. Inconsistent behaviour drawing a route between two points in Google Maps v3
  14. Country specific zoom level in Google Maps API
  15. polyline snap to road using google maps api v3
  16. Center Google Maps (V3) on browser resize (responsive)
  17. Is there a way to Fix a Google Maps Marker to the Center of its Map always?
  18. How to detect if a point is in a Circle?
  19. Letting users draw curved lines on a google map?
  20. How to trigger the onclick event of a marker on a Google Maps V3?
  21. remove route with google map
  22. Check if a latitude and longitude is within a circle google maps
  23. Add CSS styled marker to google maps
  24. Adding simple marker clusterer to google map
  25. Using Longitude/Latitude as Waypoint
  26. Google map multiple overlay no cumulative opacity
  27. Google Directions Api returning 0 routes
  28. Google Maps API map doesn’t appear [duplicate]
  29. How to connect two points in Google map..?
  30. Change map opacity outside circle of Google Maps JavaScript API v3

Leave a Comment