CODEWITHSUNDEEP
javascriptgoogle-maps-api-3markers
user1736982
user1736982

Reputation: 119

Google maps api dot marker

Currently I use a StyledMarker icon (the default bubble icon with custom colors), but I've seen that some sites use the more compact "dot" (picture of dot marker). My question is if it is possbile to replace the default bubble marker with the dot using StyledMarker? If not, how can I solve it (by the way the solution must allow dynamic coloring of the dots)?

Upvotes: 11

Views: 19827

Answers (3)

ffflabs
ffflabs

Reputation: 17501

You can declare the marker icon to be a symbol and customize it accordingly.

new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: '#00F',
        fillOpacity: 0.6,
        strokeColor: '#00A',
        strokeOpacity: 0.9,
        strokeWeight: 1,
        scale: 7
    }
});

You can play with each property to achieve the desired look.

enter image description here

If you want something more elaborate, I made (diclaimer: It was me, as in I made it) a library to use icon fonts (such as font-awesome or material icons) to render images (using an auxiliar canvas, then getting its dataurl).

enter image description here

It's basically an image factory which you can use as

new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: MarkerFactory.autoIcon({
        label: 'f1b9',
        font: 'FontAwesome',
        color: '#CC0000',
        fontsize: 20
    })
});

You can even omit the font property and it will render the literal text you pass it. I use this to enumerate the markers sometimes.

Upvotes: 30

moooeeeep
moooeeeep

Reputation: 32542

You could draw yourself a dot using a customized circle: https://developers.google.com/maps/documentation/javascript/examples/circle-simple

Upvotes: 0

geocodezip
geocodezip

Reputation: 161384

The StyledMarker uses the (deprecated) Chart Images API for its icons. It looks like that doesn't have a "measle"/dot in it (but look for yourself). In any case, from a quick look, it natively only supports these two:

  • d_map_xpin_letter
  • d_map_pin_letter

It is open source, so you can modify it to do whatever you want, but you might just have to use "normal" custom markers to get "measles".

Upvotes: 0

Related Questions