Hi, 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="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.
