Я хочу создать список ссылок динамически из массива объектов, которые управляют информационным окном из маркера на моей карте Google.
Например, у меня есть массив с именем business, и ссылки должны отображаться какbusiness [0] .name, business [1] .name etc ...
Когда вы нажимаете на ссылку, она отображает информационное окно, с которым она коррелирует, так же, как если бы вы нажали на маркер.Я также установил его, чтобы при нажатии на другой маркер предыдущий информационный блок закрывался, а новый открывался.
вот мой код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 480px }
</style>
</head>
<body>
<div id="map_canvas" style="width:620px; height:480px"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow;
(function(){
google.maps.Map.prototype.markers = new Array();
google.maps.Map.prototype.addMarker = function(marker){
this.markers[this.markers.length] = marker;
}
google.maps.Map.prototype.getMarkers = function() {
return this.markers
}
google.maps.Map.prototype.clearMarkers = function() {
if(infowindow) {
infowindow.close();
}
for(var i=0; i<this.markers.length; i++){
this.markers[i].set_map(null);
}
}
})();
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var businesses = new Array();
business = {
name:"Columbia Gorge Blue Grass",
description:"July 22-25, 2010 at the Skamania County Fairgrounds",
address:codeAddress("1003 south 6th Ave, Kelso WA 98626"),
lat:46.72,
lng:-119.55,
url:"http://www.columbiagorgebluegrass.net/",
business_type:"Getaway"
};
businesses[0] = business;
business = {
name:"Chips Casino Palace",
description:"We Deal in Fun! La Center, WA",
lat:45.72,
lng:-121.55,
url:"http://www.chipscasino.com/",
business_type:"Golf"
};
businesses[1] = business;
business = {
name:"Skamania County Fair & Timber Carnival",
description:"August 11-15, 2010 at the Skamania County Fairgrounds",
lat:45.50,
lng:-122.55,
url:"http://www.chipscasino.com/",
business_type:"Wine"
};
businesses[2] = business;
//This is where the map positions to when the page is loaded
var latlng = new google.maps.LatLng(46.88, -120.00);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for (var i = 0; i < businesses.length; i++) {
//alert(i);
if(businesses[i].business_type == "Wine"){
//http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|00CC99|000000
var icon = 'http://google-maps-icons.googlecode.com/files/wineyard.png';
}else if(businesses[i].business_type == "Golf"){
var icon = 'http://google-maps-icons.googlecode.com/files/golf.png';
}else{
var icon = 'http://google-maps-icons.googlecode.com/files/festival.png';
}
var latlng = new google.maps.LatLng(businesses[i].lat, businesses[i].lng);
map.addMarker(createMarker(businesses[i].name,latlng));
}
function createMarker(name, latlng) {
var marker = new google.maps.Marker({
position:latlng,
map: map,
icon: icon,
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
console.log();
});
return marker;
}
function codeAddress(address) {
var this_address = address;
geocoder.geocode( { 'address': this_address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
return results[0].geometry.lat;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
$(document).ready(function(){
initialize();
});
</script>
</body>
</html>
Я не уверен, если янужно добавить еще один EventListener или добавить вызов функции или что.
Любая помощь будет оценена.
Спасибо!