Setting marker title in Google Maps API 3 using jQuery
I am having a couple of problems with Google Maps and jQuery. Wondered if anyone can help with the smaller of the two problems and hopefully it will help me to fixing the bigger one.
I am using the below code to populate a google map, basically it uses generated HTML to populate the maps in the form:
<div class="item mapSearch" id="map52.48228_-1.9026:800">
<div class="box-prise"><p>(0.62km away)</p><div class="btn-book-now">
<a href="/venue/800.htm">BOOK NOW</a>
</div>
</div><img src="http://media.toptable.com/images/thumb/13152.jpg" alt="Metro Bar and Grill" width="60" height="60" />
<div class="info">
<h2><a href="/venue/800.htm">Metro Bar and Grill</a></h2>
<p class="address">73 Cornwall Street, Birmingham, B3 2DF</p><strong class="proposal">2 courses £14.50</strong>
<dl>
<dt>Diner Rating: </dt>
<dd>7.8</dd>
</dl></div></div>
<div class="item mapSearch" id="map52.4754_-1.8999:3195">
<div class="box-prise"><p>(0.97km away)</p><div class="btn-book-now">
<a href="/venue/3195.htm">BOOK NOW</a>
</div>
</div><img src="http://media.toptable.com/images/thumb/34998.jpg" alt="Filini Restaurant - Birmingham" width="60" height="60" />
<div class="info">
<h2><a href="/venue/3195.htm">Filini Restaurant - Birmingham</a></h2>
<p class="address">Radisson Blu Hotel, 12 Holloway Circus, Queensway, Birmingham, B1 1BT</p><strong class="proposal">2 for 1: main courses </strong>
<dl>
<dt>Diner Rating: </dt>
<dd>7.8</dd>
</dl></div></div>
<div class="item mapSearch" id="map52.47775_-1.90619:10657">
<div class="box-prise"><p>(1.05km away)</p><div class="btn-book-now">
<a href="/venue/10657.htm">BOOK NOW</a>
</div>
</div><img src="http://media.toptable.com/images/thumb/34963.jpg" alt="B1 " width="60" height="60" />
<div class="info">
<h2><a href="/venue/10657.htm">B1 </a></h2>
<p class="address">Central Square , Birmingham, B1 1HH</p><strong class开发者_JAVA技巧="proposal">25% off food</strong>
<dl>
<dt>Diner Rating: </dt>
<dd>7.9</dd>
</dl></div></div>
The JavaScript loops though all the divs with class mapSearch and uses this to plot markers using the div ID to get the lat/lon and ID of the venue:
var locations = $(".mapSearch");
for (var i=0;i<locations.length;i++) {
var id = locations[i].id;
if (id) {
var jsLonLat = id.substring(3).split(":")[0];
var jsId = id.substring(3).split(":")[1];
var jsLat = jsLonLat.split("_")[0];
var jsLon = jsLonLat.split("_")[1];
var jsName = $("h2").text();
var jsAddress = $("p.address").text();
var latlng = new google.maps.LatLng(jsLat,jsLon);
var marker = new google.maps.Marker({
position: latlng,
map:map,
icon: greenRestaurantImage,
title: jsName
});
google.maps.event.addListener(marker, 'click', function() {
//Check to see if info window already exists
if (!infowindow) {
//if doesn't exist then create a empty InfoWindow object
infowindow = new google.maps.InfoWindow();
}
//Set the content of InfoWindow
infowindow.setContent(jsAddress);
//Tie the InfoWindow to the market
infowindow.open(map,marker);
});
bounds.extend(latlng);
map.fitBounds(bounds);
}
}
The markers all plot OK on the map, however I am having probs with the infoWindow bit. I want to display info about each venue when clicked, however using my code above it just puts all info in one box when clicked, not individually. Hoping it is a simple fix!
Hoping once I fix this I can work out a way to get the info window displaying if I hover over the div in the html.
As far as my jQuery knowledge is concerned, what you are seeing is right; $("h2").text()
will concatenate inner text of all H2s into one string and return it. You better try something along these lines:
// inside your if (id) clause
var jsName = $("h2", locations[i]).text();
var jsAddress = $("p.address", locations[i]).text();
You can .each()
over $(".mapSearch")
if you want to simplify your code.
$(document).ready(function() {
//<![CDATA[
if (GBrowserIsCompatible()) {
function createMarker(point, html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// Display the map, with some controls and set the initial location
var map = new GMap2(document.getElementById("map"));
map.enableContinuousZoom();
//map.enableScrollWheelZoom();
map.enablePinchToZoom(); // ForiPhone users
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(51.53177, -0.08001), 16);
var icon = new GIcon();
var point = new GLatLng(51.53177, -0.08001);
var marker = createMarker(point, '<div style="width:240px" id="mapsball"></div>');
map.addOverlay(marker, icon);
}
// display a warning if the browser was not compatible
else {
alert("Sorry, Google Maps is not compatible with your browser");
}
//]]>
});
精彩评论