Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change marker color? Google Maps [duplicate]

function createMarker(latlng, item) {
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

This part of the code . On the website it appears as a standard marker, it suits us all but red. How do I change it to another color?

https://yadi.sk/i/ZDONpfoijAjdZ

like image 337
Masculin Féminin Avatar asked Sep 18 '15 11:09

Masculin Féminin


People also ask

How to add color markers to Google Maps API key?

Create an HTML file which loads Google Maps by following Google Maps API official docs: Hello World. Your code will look something like the code snippet below. Note: Remember to change YOUR_API_KEY to your actual Google Maps API key. 2. Add different color markers To add a blue color marker, we need to change the icon of the marker.

Can I customize the Google Maps icon?

Whether the topic is about the Olympics or has a Valentine’s Day theme, you can be sure you continue your map’s cohesive narrative by customizing the Google Maps icon, also known as the map marker, that symbolizes the locations below. This can be done in three ways, via the color, shape, and label of your map marker.

How do I Make my map markers match my content?

To the right of the Advanced options menu, next to “Label each marker” choose between none, letters, and numbers. Once you’ve selected, opt to Map Your Data near the bottom of the page. Master the three ways of making your map markers match your content: ​​color, shape, and label with BatchGeo.

How do I add different color markers to my website?

Add different color markers To add a blue color marker, we need to change the icon of the marker. This is done by adding an icon property and specifying a URL for it like below.


1 Answers

You should use the icon property. For example,

var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});

There are many colors available at google.com. Just replace green-dot with your color, like:
http://maps.google.com/mapfiles/ms/icons/green-dot.png
http://maps.google.com/mapfiles/ms/icons/blue-dot.png
http://maps.google.com/mapfiles/ms/icons/red-dot.png
http://maps.google.com/mapfiles/ms/icons/yellow-dot.png


Some examples from Google:

(to get image URL, hover over it or Right-click → 'Copy Image Location' etc)

64×64px

32×32px

12×20px

More at: https://sites.google.com/site/gmapsdevelopment/ or search for more.

like image 167
Yeldar Kurmangaliyev Avatar answered Oct 18 '22 02:10

Yeldar Kurmangaliyev