Javascript toggle google map ( better version)
http://jsfiddle.net/zwHUc/
HTML header:
<script src="http://maps.google.com/maps/api/js" type="text/javascript"></script>
HTML body:
<a id="map_option" href="#" data-latitude="<?php echo $latitude;?>" data-longitude="<?php echo $longitude; ?>" data-map="map_canvas<?php echo $map_counter; ?>">LOCATION</a>
<div class="hidden_map" id="map_canvas<?php echo $map_counter; ?>"></div>
where map_canvas1,2,3, ... n
<script>
jQuery(document).ready(function(){
jQuery('a#map_option').on('click', function (e) {
e.preventDefault();
console.log('clicked');
var $el = jQuery(this);
var latitude = $el.data('latitude') ;
var longitude = $el.data('longitude') ;
var map_canvas = $el.data('map') ;
jQuery("#" + map_canvas).toggle();
var latlng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 15,
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"
});
/* get directions - implement the onclick event on search box
var infowindow = new google.maps.InfoWindow({
content: "<strong>Property</strong><br><span style='color:#F67325;font-weight:bold;'>Get Directions:</span> <input id='clientAddress' type='text'>"+
"<input type='button' onClick=getDir() value='Go!'>"
});
google.maps.event.addListener(myMarker, 'click', function () {
infowindow.open(map, myMarker);
});
geocoder = new google.maps.Geocoder();
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: false
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
*/
});
});
</script>