I want to change the COUNTY icon to blue (anything but red).
Is there a way to define different icon colour for a specific point ?
<script type="text/javascript">
//<![CDATA[
var map = null;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(39.831125875,-112.15968925),
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();
});
// Add markers to the map
// Set up three markers with info windows
var point = new google.maps.LatLng(40.970826,-112.048187)
var marker = createMarker(point,'Utah-Davis County');
var point = new google.maps.LatLng(40.235509,-111.660576)
var marker = createMarker(point,'Utah-Provo');
var point = new google.maps.LatLng(40.766502,-111.897812)
var marker = createMarker(point,'Utah-Salt Lake City');
}
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);
});
}
function animate(lati,long) {
var latLng = new google.maps.LatLng(lati, long); //Makes a latlng
map.panTo(latLng); //Make map global
}
//]]>
</script>
Is there a way to define different icon colour for a specific point ?
I think this will help. You have to create a custom marker though.
Google Maps API 3 - Custom marker color for default (dot) marker
Specifically for your question, you can do something like this:
var pinColor = "2F76EE"; // a random blue color that i picked
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
then
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0,0),
map: map,
icon: pinImage,
shadow: pinShadow
});
credit to matt burns
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With