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.
