Question

I want to implement the google map in my page. In my page there is one textbox and one button. User need to enter the location for which he want to have the map. Then on clicking of the button the map should appear in a div.

Could anyone provide me the steos to do so?

Thanks in advance.

Answer 1

This is quite easy if you use the google api js file. As a reference you can use this link:
http://code.google.com/apis/maps/documentation/javascript/reference.html

1. Add the jQuery and GoogleMaps API library in the HEAD section:

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
   

2. Add new tag to create the google maps object in the div:

   var geocoder;
   var map;
   $(document).ready(function() {
       /* Create the geocoder */
       geocoder = new google.maps.Geocoder();
       /* Some initial data for the map */
       mapOptions = {
           zoom: 10,
           center: new google.maps.LatLng(48.13, 13.58),
           mapTypeId: google.maps.MapTypeId.TERRAIN
       };
       map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
   };
   

3. Add on click handler for the button:

   $('#idMyButton').click(function() {
       if (geocoder) {
           var address = $('#idMyTextbox').val();
           geocoder.geocode( { 'address': address}, function(results, status) {
               if (status == google.maps.GeocoderStatus.OK) {
                   /* Position the map */
                   map.panTo(results[0].geometry.location);
                   /* Put a marker */
                   new google.maps.Marker({
                       map: map,
                       position: results[0].geometry.location,
                       title: address,
               });
           }
           else
               alert('Address not found');
           };
       }
   });
   

I hope this will help.