welcome Netizen

Share Your Knowledge.It is a way to achieve immortality

Tuesday, December 27, 2011

How to integrate Google map in or Integration Google map in Or API Google map

Here I will explain about, How to integrate the Google map in web site.
First for Google map integration you need to get the API key from Google website. In before there is no limit for generating API key per day for Google map. But now the Google introduced on October 1st some limitation for using Google map.
Also there is a limit of number of geocode usage per day..  Refer to the FAQ for details.
For getting an API key, Go to the below link enter your website URL and generate the API key..

There are number of procedure to integrate a google map in website, some of them are using dll to add a google map. But this methods is very easy method to integrate google map.
Here I used JavaScript methods to integrate on google map.
By using this code we can search the place using Country name or Postcode. i pass the country name form the server side code.

You have to mention the api key for your website

<script src=";v=2&amp;key=API KEY&sensor=false"

Here the country name has passed from the server side in the variable name txtAddress from textbox

<script type="text/javascript">
           var map;
           var geocoder;
           function initialize() {
               if (GBrowserIsCompatible()) {
                   map = new GMap2(document.getElementById("map"));
                   map.setCenter(new GLatLng(51.5, -0.1), 10);

                   geocoder = new GClientGeocoder();
           function showAddress() {
               var txtAddress = document.getElementById("<%=txtAddress.ClientID %>");
               var address = txtAddress.value;

                function(point) {
                    if (!point) {
                        alert(address + " not found");
                    else {
                        map.setCenter(point, 15);
                        var marker = new GMarker(point);

In Body we have to add the JavaScript function in on bodyload.then we have to declare Div tag for showing google map. Code as follows.

<body onload="initialize()" onunload="GUnload()">
    <form id="form1" runat="server">
            <asp:TextBox ID="txtAddress" runat="server" />                                            
            <input type="button" value="Find" onclick="showAddress();" />
        <div id="map" style="width: 500px; height: 500px"></div>

First enter country name in the textbox
Then click find button to show the country in the google map.
Now the map shows the exact point as mention place in the textbox.
By using this google map use option zoom in and zoom out.
Change the view of the map.
Move the place in the map.

I hope this one helpful to all…….

Post your valuable comments here...........


Post a Comment