hi,
i would like to find a javascript that displays a table, each row being an address. If a row is checked, a marker should be displayed on a google map underneath.
Any suggestion?
A:
Surajit
2010-10-18 12:47:14
there is no table in your example
Mermoz
2010-10-18 15:11:04
you want to do your work done by me.........this is an example where data is coming from xml.you have to just bind the xml.pls use your unused brain a bit......
Surajit
2010-10-20 05:46:17
+1
A:
Here is a script to toggle markers using checkboxes in a table based on their address. I used jQuery for form interaction. This script only sends a geocode request if the user clicks on a marker for the first time..
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false">
</script>
<script>
var geocoder;
var map;
markers = [];
function initialize(){
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress(address){
//check if this marker is already in array
geocoder.geocode({
'address': address
}, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
//keep track of your markers, i am using address here as an ID but anything else can be used such as element id
markers.push({
id: address,
marker: marker
})
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function isGeocoded(address){
//check if marker is in marker array
index = inArray(address)
if (index >= 0) {
m = markers[index].marker
//is marker visible ?
if (m.getMap() === null) {
m.setMap(map)
//pan map to the toggled marker
map.panTo(m.position)
}
else {
//toggle marker
m.setMap(null);
}
}
else {
codeAddress(address);
}
}
function inArray(address){
for (i = 0; i < markers.length; i++) {
if (markers[i].id == address) {
return i
}
}
}
$(document).ready(function(){
$("table .ch").change(function(){
isGeocoded($(this).val());
})
})
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 320px; height: 480px;">
</div>
<div>
<table>
<tr>
<td>
<input type="checkbox" class="ch" value="Sydney, NSW">
</td>
<td>
Sydney, NSW
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="ch" value="40 Devon St, Christchurch, New Zealand">
</td>
<td>
40 Devon St, Christchurch, New Zealand
</td>
</tr>
</table>
</div>
</body>
</html>
Michal
2010-10-18 20:52:09
when i embed this in my website i always get an error saying that "$("table .ch")" is empty. is it because you have to put all the divs like " $("#cRight > etc"?
Mermoz
2010-10-19 14:26:12
in fact the the $() raise the error "is empty" only if i also use the Prototype 1.5 library...
Mermoz
2010-10-20 10:53:15