Saturday, 5 April 2014

How to add Google maps to your website using JQuery?

Description:

Welcome to Jqueryjohn.com.

In this article, I will explain how to add Google Maps on website using Jquery.  

Google maps offer more power to web designers. Google Maps can able to provide street maps and route planner for travelling. It is easy to understand maps and directions and it can bring more customers through your door.

Steps for adding Google Maps:

1. Add a following file from Google CDN.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

2. Download Google Maps Plugin.
You can download from https://github.com/hpneo/gmaps (or) http://hpneo.github.io/gmaps/documentation.html

2. Extract it and include the files gmaps.js and latest JQuery version.

3. Once the document is ready, initialize the Google Map widget to the div element.

4. We can get latitude and longitude by the following steps.

Open Google Maps website.

Use the zoom controls on the map to find the place which you want to set by default.

Now, right click on the place, select what’s here? Option and you will get two values at the top of the page.

5. We can also add markers to highlight the place on the map.

In the below program, I added Google maps on the particular div and added marker for highlighting the particular position.

Example program:

<html>
<head>
    <title>Basic</title>
    <script src="jquery-1.10.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
    </script>
    <script src="gmaps.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var mapArea = new GMaps({
                zoom: 9, //Set Zoom Level
                el: '#divMap',
                lat: 8.565081,
                lng: 77.968092,
                zoomControl: true,
                zoomControlOpt: {
                    style: 'LARGE',
                    position: 'RIGHT_CENTER'
                },
                panControl: true, // used for navigating left,right,top and bottom
                streetViewControl: true,
                mapTypeControl: true, //used for displaying map/satellite mode
                overviewMapControl: false
            });
            mapArea.addMarker({
                lat: 8.565081,
                lng: 77.968092,
                title: 'Nazareth',
                click: function (e) {
                    alert('Nazareth');
                }
            })
        });
    </script>
    <style type="text/css">
        #divMap
        {
            display: block;
            width: 95%;
            height: 350px;
            margin: 0 auto;
            box-shadow: 0px 5px 20px #ccc;
        }
    </style>
</head>
<body>
    <div>
        <div id="divMap">
        </div>
    </div>
</body>
</html>


Adding Google Maps to your site, Adding custom Google maps to your website using jQuery, Embed Google map in your webpage
at

1 comment: