jQuery + google maps + Elevation

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

by wilcochris

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div class='mapme'>Show Map</div>
  <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);
		$this.find('.mapit').slideToggle(500);
		$(this).text($(this).text() == 'Show Map' ? 'Hide Map' : 'Show Map');
	});
		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);
			
			google.maps.event.addListenerOnce(map, 'idle', function()
			{
				$('.mapit').hide();
			});
		}
		//alert('Clicked');
		
		//displayMap();
		
	//});
	google.maps.event.addDomListener(window, 'load', initialize);