Google Maps APIv3 - how to overlay multiple markers with different png images
I'm currently working on a project which involves plotting lots of custom markers onto a map, then creating a popup page when clicked. This problem i'm having, being a newbie at javascript is getting a second marker image showing on the map. So far, i have the following code, as you see, the 'camera' icons work... but needing the 'caltex' to work also...:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-43.54654110763488, 172.6156002235225);
var myOptions = {
zoom: 11,
center: latlng,
navigationControl: false,
scaleable: false,
draggable:false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID,position: google.maps.ControlPosition.TOP_LEFT},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, webcams, caltex);
}
/**
* 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 webcams = [
['Anzac Dr ', -43.51129867148775, 172.7162349879427, 9],
['QEII', -43.48499827165804, 172.6179431987025, 8],
['Yaldhurst Russley', -43.52069820902269, 172.5344992587786, 7],
['Waimakariri Bridge', -43.47192540674842, 172.5693997383076, 6],
['Dyers Linwood', -43.54654110763488, 172.6956002235225, 4],
['Main North W', -43.4513336384715, 172.6278547889116, 5],
['Main North N', -43.4509480091774, 172.6386309983553, 3],
['Memorial Ave', -43.49318192393784, 172.5499633557023, 2],
['The Hub', -43.54341394837794, 172.5256827185488, 1]
];
/** Markers for caltex stations **/
var caltex = [
['Caltex VIC', -41.01785817829983, 174.91504669189453, 11], //Corner High & Brunswick Streets
['Caltex Porirua', -41.01785817829983, 174.91504669189453, 10], //Parumoana Street
['Caltex Railway Avenue', -41.01785817829983, 174.91504669189453, 9], //20 Railway Avenue
['Olympic Service Station', -41.23076651060946, 174.8100757598877, 8], //Corner Holland Crescent & Vogel Street
['Caltex Rimutaka', -41.2346071181492, 174.80685710906982, 7], //1193 Fergusson Drive North
['Caltex Wellington Airport', -41.243384802383986, 174.81380939483643, 6], //Corner Calabar Road & Broadway
['Caltex Wainuiomata', -41.29338219297847, 174.78076457977295, 4], //14-16 The Strand
['Caltex Upper Hutt', -41.301958541159564, 174.7844123840332, 5], //749-755 Fergusson Drive
['Caltex Stokes Valley', -41.286771831897774, 174.77312564849854, 3], //7 Stokes Valley Road, Stokes Valley
['Caltex Newtown', -41.285127199004215, 174.7728681564331, 2], //224 Riddiford Street
['Caltex Basin Reserve', -41.30211973991373, 174.7792625427246, 1] //28 Adelaide Road
];
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('camera.png',
// This marker is 32 pixels wide by 32 pixels tall.
new google.maps.Size(32, 32),
// 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(0, 0));
var shadow = new google.maps.MarkerImage('camera_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(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// 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: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var cameras = locations[i];
var myLatLng = new google.maps.LatLng(cameras[1], cameras[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: cameras[0],
zIndex: cameras[3]
});
}
for (var i = 0; i < locations.length; i++) {
var caltex = locations[i];
var myLatLng = new google.maps.LatLng(caltex[1], caltex[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: caltex[0],
zIndex: caltex[3]
});
}
}
var marker = newGMarker(LatLng,cameras)
</script>
</head>
<body onload="initialize()">
开发者_JAVA百科 <div id="map_canvas" style="width:450px; height:500px"></div>
</body>
</html>
Looks like you encapsulated the marker logic into setMarkers() so that you could call it once for each type of marker. However you only call it once. You need to
setMarkers(map, webcams);
setMarkers(map, caltex);
加载中,请稍侯......
精彩评论