Change colour of specific google map markers

Question

I currently render a google map on my website using the below code to display it and place the markers on the map.

    // Creating a new map
    //UK Cordinates 55.37911,-3.427734 zoom 9
    var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(54.901882,-3.603516),
            zoom: 6,
            panControl: false,
            scrollwheel: false,
      mapTypeControl: false,
      streetViewControlOptions: {position: google.maps.ControlPosition.LEFT_CENTER},
      zoomControlOptions: {position: google.maps.ControlPosition.LEFT_CENTER},
      mapTypeId: google.maps.MapTypeId.ROADMAP


    // Creating the JSON data
    var json = [
       {
            "title": "BLAH",
            "lat": 51.514979,
            "lng": -0.134175,
            "description": "BLAHBLAHBLAH"
        },
        {
            "title": "BLAH",
            "lat": 51.512779,
            "lng": -0.132625,
            "description": "BLAHBALH"

        },
        {
            "title": "BLAH",
        "lat": 51.489025,
            "lng": -0.191840,
            "description": "BLAHBLAH"
        },

I would like to make only certain markers appear green instead of the standard red. There is a lot of information on how to do this across the web, however, not through the method that my markers are placed (JSON data). A previous designer made this so I'm unsure!

Many thanks!

It would help to see your Javascript code where you actually loop over that JSON data and create your markers — duncan, Jan 20 '14 at 17:12
possible duplicate of [Colour the first marker of a Google Map a different colour](http://stackoverflow.com/questions/16900210/colour-the-first-marker-of-a-google-map-a-different-colour) — geocodezip, Jan 20 '14 at 17:50

score 1 · Answer 1 · answered Jan 20 '14 at 17:19

You're going to need something in that JSON data which indicates which markers should be green and which should be red. That's up to you to sort out. I'm assuming we've got a new boolean value in there. However in practice you may prefer to specify the URL to a marker image (e.g. if working with more than just green and red coloured markers).

I've written this in a pseudo-pseudocode style for now until you provide us with more code showing how you're actually doing this yourself.

loop over json
    // create marker
    marker = new google.maps.Marker({
        ...
    });

    if (json.useGreen) {
        // use the green marker
        marker.setIcon('http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green.png');    
    }
end-loop

Many thanks for your input, I am working with another persons code so this looks like going to be a pain! — Harry, Jan 24 '14 at 10:00

Change colour of specific google map markers

1 Answers1