Dynamic mupltiple maps on click event

by ajayogal

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<input type="text" id="lat" value="26.5333">
<input type="text" id="lng" value="86.7333">
<br/>    
<input class="action" type="button" value="Show map" att="map_canvas1" >
<input class="action" type="button" value="Show map" att="map_canvas2" >
<input class="action" type="button" value="Show map" att="map_canvas3" >
    
<div id="map_canvas1" class='map_canvas'></div>
<div id="map_canvas2" class='map_canvas'></div>
<div id="map_canvas3" class='map_canvas'></div>

CSS

.map_canvas{height: 150px; width: 300px; background-color: gray; display: none; margin:10px}

JavaScript

function displayMap() {    
    var mapid = $(this).attr('att'); 
    alert(mapid);
    
    var lat = $('input[id=lat]').val();
    var lng = $('input[id=lng]').val();    
    
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(lat, lng),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    $("#"+mapid).show();
    var map = new google.maps.Map(document.getElementById(mapid), mapOptions);
};

// 
$(function() {
    $('.action').on('click',displayMap);    
});