Thanks to this site and your help, I have almost finished my Googlemaps script. There is one more thing, I need your help with:
I have multiple markers on my map.
I would like to: -save each marker position in a variable -make external links below the map which link to the markers -change mapcenter on click of these links (described above)Here is my script so far:
<script type="text/javascript">
var offender_locations = [
["10001", "Title 2", "icon.png"],
["10002", "Title 3", "icon.png"],
["10010", "home", "icon.png"]
];
var myOptions 开发者_高级运维= {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("results_map"), myOptions);
var latlng = new google.maps.LatLng(0, 0);
for (i = 0; i < offender_locations.length; i++) {
var infowindow = new google.maps.InfoWindow(),
geocoder_map = new google.maps.Geocoder(),
address = offender_locations[i][0],
icon_img = offender_locations[i][2];
(function(addr, img, i) {
geocoder_map.geocode({
'address': addr
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
icon: img
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(offender_locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
} else {
alert("error!");
}
});
}(address, icon_img, i));
}
function zoomin() {
map.setZoom(15);
};
function zoomout() {
map.setZoom(15);
}
</script>
The last two small functions are for the click even of the external links. at this moment they only change the zoom level and do not change the map center.
Try pushing your markers to an array so you can look at them later.
At the beginning do var markers = [];
Then after each marker declaration markers.push(marker);
.
You can also use object to store your markers or other layers in case you want to access them later by primary key:
var markers = {};
markers['car_1'] = marker;
//change the position of 'car_1'
markers['car_1'].setPosition(x,y);
//you also can create much more complex structure like this
marker['car_2'] = {'title': 'Car 1', _ref: marker};
//change the position of 'car_2'
markers['car_2']._ref.setPosition(x,y);
Attention: make sure your object keys(in our case: car_1, car_2) are not the same(primary key).
精彩评论