Javascript toggle divs
http://jsfiddle.net/krY56/1/
<a href="#" onclick="toggler( <?php echo $latitude; ?>, <?php echo $longitude; ?>, '<?php echo 'map_canvas' . $map_counter; ?>');">Click #2</a>
<input value="Show map" id="action" type="button" onclick="mapDisplay( <?php echo $latitude; ?>, <?php echo $longitude; ?>, '<?php echo 'map_canvas' . $map_counter; ?>');">
<div class="hidden_map" id="map_canvas<?php echo $map_counter; ?>"></div>
#map_canvas1, #map_canvas2 , #map_canvas3 , #map_canvas4 , #map_canvas5 , #map_canvas6 , #map_canvas7 { width: 200px; height: 200px; display: :none }
<script>
function toggler(latitude, longitude, map_canvas) {
event.preventDefault();
console.log("Latitude: "+ latitude ) ;
console.log("Longitude: "+ longitude ) ;
console.log("Map Canvas: "+ map_canvas ) ;
jQuery("#" + map_canvas).toggle();
var latlng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(map_canvas), mapOptions);
var myMarker = new google.maps.Marker(
{
position: latlng,
map: map,
title:"Property Location"
});
}
</script>