In this example:
<style>
body{
padding:20px
font-family: Arial;
font-size: 16px;
}
#map-canvas, #side-bar {
height: 600px;
width: 800px;
}
pre {
border:1px solid #D6E0F5;
padding:5px;
margin:5px;
background:#EBF0FA;
}
/* fix for unwanted scroll bar in InfoWindow */
.scrollFix {
line-height: 1.35;
overflow: hidden;
white-space: nowrap;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<script type="text/javascript">
"use strict";
// variable to hold a map
var map;
// variable to hold current active InfoWindow
var activeInfoWindow ;
// ------------------------------------------------------------------------------- //
// initialize function
// ------------------------------------------------------------------------------- //
function initialize() {
// map options - lots of options available here
var mapOptions = {
zoom : 5,
draggable: true,
center : new google.maps.LatLng(46.00, -84.00),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map in div called map-canvas using map options defined above
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// define some RGB fill colors
var marker_background_colors =
["#FF0000" , "#FF8000" , "#FFFF00" , "#80FF00" , "#00FF00" , "#00FF80" ,
"#00FFFF" , "#0080FF" , "#0000FF" , "#7F00FF" , "#FF00FF" , "#FF007F" ,
"#808080" ];
// define some RGB border stroke colors
var marker_stroke_colors = ["#0000CC" , "#009900", "#FF0000"];
var color_index = 0;
var stroke_color_index = 0;
// define SVG Icon
// The lowercase 'M' is "relative" moveto
// the lowercase 'Z' closes the path
// more on SVG path command: http://www.w3.org/TR/SVG/paths.html and http://map-icons.com/
// map pin marker
var marker1 = 'M 50 -119.876 -50 -119.876 -50 -19.876 -13.232 -19.876 0.199 0 13.63 -19.876 50 -19.876 Z';
// square pin marker
var marker2 = 'M0-165c-27.618 0-50 21.966-50 49.054C-50-88.849 0 0 0 0s50-88.849 50-115.946C50-143.034 27.605-165 0-165z';
var index, scale, fill_color, stroke_color, location;
// place some Sales Office markers
for(var count1=0; count1 < 20; count1++){
// iterate through fill color and stroke colors
color_index++;
stroke_color_index++;
if (color_index > 12) {color_index = 0;}
if (stroke_color_index > 2) {stroke_color_index = 0;}
fill_color = marker_background_colors[color_index++];
stroke_color = marker_stroke_colors[stroke_color_index++];
scale = .3;
index = 10;
var lat = 46.00 + (Math.random()-.5) * 14;
var lng = -84.00 + (Math.random()-.5) * 24;
location = new google.maps.LatLng(lat,lng);
fnPlaceMarkers(location, marker1, fill_color, stroke_color, scale, index, lat + "," + lng );
// place some Sales Rep. markers
for(var count2 = 0; count2 < 3; count2++){
scale = .2;
index = -10;
var lat2 = lat + (Math.random()-.5) * 3;
var lng2 = lng + (Math.random()-.5) * 5;
location = new google.maps.LatLng(lat2,lng2)
fnPlaceMarkers(location, marker2, fill_color, stroke_color, scale, index, lat2 + "," + lng2 );
}
}
}
// ------------------------------------------------------------------------------- //
// create markers on the map
// ------------------------------------------------------------------------------- //
function fnPlaceMarkers(myLocation, marker, fill_color, stroke_color, scale, index, string){
var myIcon = {
path: marker,
fillColor: fill_color,
fillOpacity: 0.7,
scale: scale,
strokeColor: stroke_color,
strokeWeight: 2,
zIndex: index,
rotation: 1
};
// create marker and put it on map
var marker = new google.maps.Marker({
position: myLocation,
icon: myIcon,
map: map
});
// create an InfoWindow
var infoWnd = new google.maps.InfoWindow();
// add content to your InfoWindow
infoWnd.setContent('<div class="scrollFix">' + 'lat, lng: ' + string + '</div>');
// add listener on InfoWindow - close last infoWindow before opening new one
google.maps.event.addListener(marker, 'click', function() {
// Close active window if exists - [one might expect this to be default behaviour, no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// Open InfoWindow
infoWnd.open(map, marker);
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd;
});
}
// ------------------------------------------------------------------------------- //
// initial load
// ------------------------------------------------------------------------------- //
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<a href="../index.php">BACK</a><br>
<br/>
<h3>Google Map: display multiple markers - SVG, fill and stroke color</h3>
<p>In this example:</p>
<ul>
<li>square markers represent Sales Offices locations</li>
<li>tear shaped markers represents location of Sales Representative</li>
<li>we are using 13 different colors to represent Sales Regions. Because we have 20 sales regions, we use marker border color (stroke color)
combined with marker fill color to uniquely identify each region.</li>
</ul>
<br/>
<div id="map-canvas"></div>
<br/>
<br/>
<pre>
</pre>
</body>
</html>