html Javascript切换谷歌地图（更好的版本）

Posted 2021-05-11

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>