jcadima
2/2/2016 - 11:04 PM

Javascript toggle divs

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>