I am trying to put 11 different markers on my map. I know how to add a
custom maker to map, but dont want same marker to show for every
location. Here is my code I use for showing map and displaying markers
at certern locations:
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(39.050385, -95.816746),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarkers(map, courts); }
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var courts = [
['Douglas County Jail', 38.962959, -95.23424, 1],
['Franklin County Jail', 38.6142271, -95.2685341, 2],
['Geary County Jail', 39.0303674, -96.828693, 3],
['Jackson County Jail', 39.4634505, -95.7361762, 4],
['Jefferson County Jail', 39.215277, -95.3127498, 5],
['Lyon County Jail', 38.403201, -96.179739, 6],
['Osage County Jail', 38.6104, -95.6837, 7],
['Pottawatomie County Jail', 39.393521, -96.415235, 8],
['Riley County Jail', 39.179706, -96.563217, 9],
['Shawnee County Jail', 39.05036, -95.671435, 10],
['Wabaunsee County Jail', 39.0166657, -96.2891624, 11]];
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('images/jailicon1.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(27, 27),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(14, 27));
var shadow = new google.maps.MarkerImage('images/jailicon1_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(45, 27),
new google.maps.Point(0,0),
new google.maps.Point(14, 27));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord:[26,0,23,1,23,2,23,3,26,4,26,5,26,6,26,7,26,8,26,9,26,10,26,11,26,12,26,13,26,14,26,15,26,16,26,17,26,18,26,19,26,20,26,21,26,22,26,23,23,24,23,25,23,26,2,26,2,25,4,24,0,23,0,22,0,21,0,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,0,5,0,4,2,3,2,2,4,1,0,0,26,0],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var court = locations[i];
var myLatLng = new google.maps.LatLng(court[1], court[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: court[0]
Thanks
Kevin
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
