jQuery + google maps + Elevation

playing with google maps v3 events, jQuery, icons from http://google-maps-icons.googlecode.com

by rameshcharykotha

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div class='mapme'>Show Map</div>
 <div class = "toggle">
  <div class="mapit">
    <div id="map" style="width:300px;height:140px;"></div>
  </div> 
</div>

CSS

body{
    margin:20px;
   
}
.click{
    cursor:pointer;
    padding:20px;
    width:300px;
    background:orange;
}
.map{
    height:140px;    
    padding: 0 0;
}

JavaScript

$('.mapme').click(function(){
    var $this = $(this);
    var t = $(".mapme").text();
    $(".mapme").text(t == 'Show Map' ? 'Hide Map' : 'Show Map');
    $('.toggle').slideToggle(500);
    
})
function initialize() {
	    var latlng = new google.maps.LatLng(48.89376,2.33742); 
   	    var settings = {
	    	zoom: 15,
	        center: latlng,
	        disableDefaultUI: true,
            zoomControl: true,
        	mapTypeId: google.maps.MapTypeId.ROADMAP
		};
         
		var map = new google.maps.Map(document.getElementById("map"), settings);
        var marker=new google.maps.Marker({
	          position:latlng,
	          });
		 marker.setMap(map);
    
    
    //MAP 2
    
        var latlngz = new google.maps.LatLng(48.89376,2.33742); 
   	    var settingsz = {
	    	zoom: 15,
	        center: latlngz,
	        disableDefaultUI: true,
            zoomControl: true,
        	mapTypeId: google.maps.MapTypeId.ROADMAP
		};
         
		var mapz = new google.maps.Map(document.getElementById("mapz"), settingsz);
        var markerz =new google.maps.Marker({
	          position:latlngz,
	          });
		 markerz.setMap(mapz);
       
        google.maps.event.addListenerOnce(map, 'idle', function() {
            $('.mapit').hide();
        });    
    }
google.maps.event.addDomListener(window, 'load', initialize);