Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)?

like image 750
user1736982 Avatar asked Dec 13 '12 10:12

user1736982


People also ask

How do I add a marker to Google Maps API?

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

Is Google Maps API still free?

Note that the Maps Embed API, Maps SDK for Android, and Maps SDK for iOS currently have no usage limits and are at no charge (usage of the API or SDKs is not applied against your $200 monthly credit).

How do I change the color of a marker in Google Maps API?

To edit the marker color, click or tap on the marker icon. When you do that, you can change both the color of the marker and its style. Go for the color or style you want to change and then click OK to see the effect. Click on the button labeled Done to save your new marker color settings.


1 Answers

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.

like image 145
ffflabs Avatar answered Oct 06 '22 00:10

ffflabs