Introduction :

Hi, Here i will explain how to use the Google maps API in our project using JQuery.To get use of google maps API with Jquery we need a Support File named as 'Gmaps.js' you can get the file content from this Link. and i used the google api url which you can notice in coding.

Aspx code :

<html>
<head>
    <title>Google Mpas API</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
    </script>
    <script src="Scripts/Gmaps.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var mapArea = new GMaps({
                zoom: 15, //Set Zoom Level
                el: '#divMap',
                lat: 13.5863,
                lng: 80.0365,
                zoomControl: true,
                zoomControlOpt: {
                    style: 'LARGE',
                    position: 'RIGHT_CENTER'
                },
                panControl: true,
                streetViewControl: true,
                mapTypeControl: true,
                overviewMapControl: false
            });
            mapArea.addMarker({
                lat: 13.5863,
                lng: 80.0365
               })
        });
    </script>
    <style type="text/css">
        #divMap
        {
            display: block;
            width: 95%;
            height: 150px;
            margin: 0 auto;
            box-shadow: 0px 5px 20px #ccc;
        }
    </style>
</head>
<body>
    <div>
        <div id="divMap">
        </div>
    </div>
</body>
</html>