Google Maps JS API marker color v3
I am using a fantastic code library that allows me to have many specific markers with css style information fields. Additionally, I would like to have three different categories of colored markers representing 3 different rivers on the map. While there are many posts that explain how to color a marker, my code crashes if I use these approaches. I need help on how to assign a specific color for each location. Except for many other places, here is my code with the default red marker:
var locations = [
['<div id="mm-img"><a href="<?php echo $this->getThemePath()?>/mile-marker-img/Ed-00.jpg" target="_blank"><img src="<?php echo $this->getThemePath()?>/mile-marker-img/Ed-00-sm.jpg" /></a><h3>Mile Marker 0 East</h3><p>Old east channel river mouth, now East Waterway. Spokane street fishing pier. Location of historic river mouth, east channel Duwamish River.<br /><span style="font-size:10px;line-height:300%">photo: UW University Libraries</span></p></div>', 47.573600, -122.343585, 1],
['<div id="mm-img"><a href="<?php echo $this->getThemePath()?>/mile-marker-img/Ed-01.jpg" target="_blank"><img src="<?php echo $this->getThemePath()?>/mile-marker-img/Ed-01-sm.jpg" /></a><h3>Mile Marker 1 East</h3><p>Kellog Island, Federal Center South, Diagonal Way, Oxbow Building, Shoreline Access. Proposed mile marker design for new Corps of Engineers building on the Duwamish River.</p></div>', 47.560398, -122.341732, 2],
['<div id="mm-img"><a href="<?php echo $this->getThemePath()?>/mile-marker-img/BR-LWO.jpg" target="_blank"><img src="<?php echo $this->getThemePath()?>/mile-marker-img/BR-LWO-sm.jpg" /></a><h3>Old Lake Washington Outlet</h3><p>Renton airport. Near Black River resort. View of Resort on Lake Washington prior to 1916, when the lake emptied via the Black River into the Duwamish.<br /><span style="font-size:10px;line-height:300%">photo: Renton Historical Museum</span></p></div>', 47.491100, -122.217169, 38]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(47.524501, -122.319785),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
source to share
Thanks to Hungerstar for coming up with an equally good solution. Unfortunately, if I were to use your encoding, I would have to rewrite most of what I have already done. Using a combination of help and this link , I had to follow 4 steps for me to split the colored markers with all in columns in places.
1) You have locations with
[popup with a bunch of text, 47.491100, -122.217169, "blue", 38]
2) You put in a variable, an array, describing what you get
var icons = new Array();
icons["red"] = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_red.png",
3) The real sneaky part, the code I just had to copy from another guy's code was how to name the color
if (!icons[iconColor]) {
icons[iconColor] = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_"+ iconColor +".png",
4) and finally you get a badge with
map: map,
icon: getMarkerImage(locations[i][3])
source to share
For me the easiest way is to use Google Dynamic Dynamic Generator
For example: https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=%E5%8D%B1|FF0000|000000
source to share
Not sure what criteria for choosing what color you are going to use. Is this the last value in the location array?
I am using a png sprite for my markers, so for each marker I have something like this:
var redIcon = new google.maps.MarkerImage(
ABSPATH + 'images/map-icons.png',
new google.maps.Size( 20, 25 ),
new google.maps.Point( 0, 60 ),
new google.maps.Point( 10, 85 )
);
Then you define which color to use and attach it to the marker:
if ( locations[i][3] == 38 ) {
icon = redIcon;
} else {
icon = bluIcon;
}
marker.setIcon( icon );
source to share