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 :

    <title>Google Mpas API</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="">
    <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
                lat: 13.5863,
                lng: 80.0365
    <style type="text/css">
            display: block;
            width: 95%;
            height: 150px;
            margin: 0 auto;
            box-shadow: 0px 5px 20px #ccc;
        <div id="divMap">