CODEWITHSUNDEEP
colorsiconsmapsmarker
user2208358
user2208358

Reputation: 37

changing google map marker colors

How do I change the colours of the Icons easily? I just want to be able to change it to a different colour using googles standard markers? Is there a way where I can just declare the color where I create the marker with var = marker..... ? 

<script type="text/javascript"> 

var map = null;
function initialize() {
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(54.2361100,-4.5480600),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
                            myOptions);

google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });

var point = new google.maps.LatLng(50.7184100,-3.5339000); 
  var marker = createMarker(point,'<div style="width:200px"><h2>text</h2><\/div>')


  var point = new google.maps.LatLng(50.9097000,-1.4043500);
  var marker = createMarker(point,'<div style="width:200px"><h2>text</h2><\/div>')

}

var infowindow = new google.maps.InfoWindow(
{ 
size: new google.maps.Size(150,50)
});

function createMarker(latlng, html) {
var contentString = html;
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });
}



</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
<div id="map_canvas" style="width: 535px; height: 500px"></div>

Upvotes: 0

Views: 900

Answers (1)

Adam Knights
Adam Knights

Reputation: 2151

Adjusting Sean's answer from here How can I change the color of a Google Maps marker?.

Try changing your create marker function to

function createMarker(latlng, html, iconName) {
var contentString = html;
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: iconName,
    zIndex: Math.round(latlng.lat()*-100000)<<5
});

And then call it with

var marker = createMarker(point,'<div style="width:200px"><h2>text</h2><\/div>', 'brown_markerA.png')

Making sure you place all the icons in the same place as your map page.

You can then adjust how you build up the string for different colors or letters.

Upvotes: 1

Related Questions