Binding jQuery element clicks with Google Map Markers
I am using jQuery to bind my map sidebar as part of my map scripting. When I do this, I just have one tiny problem. When you click on the sidebar links, it always reverts to opening the last marker’s infoWindow.
Which means I binding my links incorrectly or I am trigger the marker event incorrectly. If someone can help point me in the right direction ... much appreciated.
Scripting I am using.
var listings=[new google.maps.LatLng(43,-79),new google.maps.LatLng(43,-79),new google.maps.LatLng(43,-79)];
var names=['name 1','name 2','name 3'];
var descriptions=['description 1','description 2','description 3'];
var image = new google.maps.MarkerImage('/flag.png',new google.maps.Size(24,24),new google.maps.Point(0,0),new google.maps.Point(0,0));
var map;
var box;
function initialize() {
var moptions = {
zoom: 6,
center: new google.maps.LatLng(43,-79),
mapTypeId: google.maps.MapTypeId.ROADMAP,
visible: true
}
var div = document.createElement('div');
var boptions = {
content: div,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
box = new InfoBox(boptions);
for (var i = 0; i < listings.length; i++) {
var marker = new google.maps.Marker({
position: listings[i],
map: map,
draggable: false,
icon: image,
title: names[i]
});
AttachMessage(marker, i);
}
}
function AttachMessage(marker, number) {
google.maps.event.addListener(marker, 'click', function() {
box.close();
box.setContent(descriptions[number]);
box.open(map, marker);
});
//this is where I am having the issue ...
$('#sidebar').find('#marker').unbind('click').bind('clic开发者_StackOverflow中文版k', function (e) {
google.maps.event.trigger(marker, 'click');
});
}
Sidebar Marker Links
<div id="sidebar">
<ul>
<li><a id="marker" href="#">Marker One</a></li>
<li><a id="marker" href="#">Marker Two</a></li>
<li><a id="marker" href="#">Marker Three</a></li>
</ul>
</div>
Solved this one by creating a maker array and adding it to my scripting
var listings=[new google.maps.LatLng(43,-79),new google.maps.LatLng(43,-79),new google.maps.LatLng(43,-79)];
var names=['name 1','name 2','name 3'];
var descriptions=['description 1','description 2','description 3'];
var image = new google.maps.MarkerImage('/flag.png',new google.maps.Size(24,24),new google.maps.Point(0,0),new google.maps.Point(0,0));
var markers = [];
var map;
var box;
function initialize() {
var moptions = {
zoom: 6,
center: new google.maps.LatLng(43,-79),
mapTypeId: google.maps.MapTypeId.ROADMAP,
visible: true
}
var div = document.createElement('div');
var boptions = {
content: div,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
box = new InfoBox(boptions);
for (var i = 0; i < listings.length; i++) {
var marker = new google.maps.Marker({
position: listings[i],
map: map,
draggable: false,
icon: image,
title: names[i]
});
markers.push(marker);
AttachMessage(marker, i);
}
}
function AttachMessage(marker, number) {
google.maps.event.addListener(marker, 'click', function() {
box.close();
box.setContent(descriptions[number]);
box.open(map, marker);
});
}
function OpenMessage(i) {
google.maps.event.trigger(markers[i],'click');
};
精彩评论