Place a Google Map in your Web Page

Hi Guys.. here is Nice tutorial for placing Google Map in your webApplication..



First of all define the DIV element with Proper Height and Width in your page where you want to Place a Google map in your Web Page.

For Example :

 <div id="uniqueMap" style="width: 299px; height: 214px"> </div>  

now In the Head Element add the following javascript line :

<script src="http://maps.google.com/maps?file=api&amp;

v=2&key=ENTER_API_KEY_HERE"
        type="text/javascript"></script>

In the Above link API Key is the one you have to generate yourself by registering your website on the following link:

http://code.google.com/apis/loader/signup.html

Enter your website name and click on Generate ASP Key it will Generate one API Key, Paste it in the above script in place of "ENTER_API_KEY_HERE"

Now in the Head Element Paste the following Code to create another Javascript

<script type="text/javascript" language="javascript">

            function load() {

        if (GBrowserIsCompatible()) {

           

            map = new GMap2(document.getElementById("uniqueMap"));

            map.setCenter(new GLatLng(37.0625, -95.677068), 13);

            map.addControl(new GSmallMapControl());

            geocoder = new GClientGeocoder();

        }

    }

     function showAddress(address) {

       

      

        if (geocoder) {

            geocoder.getLatLng(

          address,

          function(point) {

              if (!point) {

                //  alert(address + " not found");

              } else {

                  map.setCenter(point, 13);

                   var marker = new GMarker(point);

                   map.addOverlay(marker);

                  marker.openInfoWindowHtml(address);

              }

          }

        );

        }

    }

    </script>

thats it!! now get ready to call the above defined javascript function :

in the end of your HTML page(just before the Closing </form> tag) add the following lines:

<script language="javascript" type="text/javascript">

     load();

     showAddress('Ahmedabad');   //Specify your own favorite city

        </script>

Compile and run your application you would see Google Map Placed in you Page displaying Ahmedabad Location as a Defauilt Location.. you can display your favorite city by specifying city Name in the calling function code.

Thanks !!!