Friday, January 4, 2008

How To Add Google Map to Your Web Application

Here is an example of how you can add a map to any contact us page or blog quickly and easily. •First you need a google api key ,which is free. You can find it,along with other documentation at http://www.google.com/apis Follow the instructions to "Sign up for a google API key". You'll need a gmail account, and to enter your domain name. This key can then only be used on pages served from that domain name. Along with your key, Google will give you a bit of starter code. Now create a new web application in vs.net and copy the highlited code in head section of your .aspx page.(replace [YOURKEY] with actual key)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleMap.aspx.cs"
    Inherits="GoogleMap" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=
[YOURKEY]" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
        function showMap()
         {
                if (GBrowserIsCompatible()) {
                var map = new GMap2(document.getElementById("map"));
                map.addControl(new GSmallMapControl());
                map.setCenter(new GLatLng(31.95216223802497, -7.71875), 1);
            }
        }
    //]]>
    </script>

</head>
<body onload="showMap();" onunload="GUnload()">
    <form id="form1" runat="server">
        <div id="map" style="width: 500px; height: 300px">
        </div>
    </form>
</body>
</html>

No comments:

Post a Comment