How to use Google map in our site

Question

I want use dynamic google map in our application

 

 

 

<div class="pannel-heading clearfix mtop10">Google Map</div>

<div class="col-md-12 boerder-box" id="map-canvas" style="min-height:500px; height:100%;width:100%;">
</div>

<input type="hidden" value="RamNagar Sodala in jaipur" id="address" />
<input type="hidden" value="Sodala" id="townName" />
<input type="hidden" id="ButtonShow" value="1" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(26.889044, 75.77602939);
var mapOptions = {
zoom:10,
center: latlng
}
codeAddress();
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
var address = document.getElementById('address').value;
var town = document.getElementById('townName').value;

geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: town
});
} else {

}
});
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>