jQuery GMaps Plugin

jQuery provides GMaps Plugin which helps programmers to use Google maps in variety of ways. You have to download the required files in the working folder so that the programmer can include in the head section of the HTML structure page as implemented in the following programs.

jQuery GMaps Plugin download link: https://hpneo.dev/gmaps/

In the following examples, we are using a valid existing location’s latitude and longitude which can be got from entering a location address in the input control box from the below link. Please make a note of latitude and longitude of the user input address for further proceeding in the code.

https://www.latlong.net/

Example 1: The following example demonstrates the basic call of GMaps plugin based on latitude and longitude values to show the location in the map .



html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery GMaps Plugin</title>
  
        <script type="text/javascript" src=
        </script>
        <script type="text/javascript" src=
         </script>
        <script type="text/javascript" src="gmaps.js"></script>
  
        <link rel="stylesheet" href=
        <link rel="stylesheet" type="text/css" href="examples.css" />
  
        <style>
            body {
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            var map;
            $(document).ready(function () {
                map = new GMaps({
                    el: "#map",
                    lat: 21.164904,
                    lng: 81.324297,
                    zoomControl: true,
                    zoomControlOpt: {
                        style: "SMALL",
                        position: "BOTTOM_LEFT",
                    },
                    panControl: true,
                    streetViewControl: true,
                    mapTypeControl: true,
                });
            });
        </script>
    </head>
    <body>
        <h1 style="color: green;">GeeksForGeeks</h1>
        <b>jQuery GMaps Plugin</b>
          
<p></p>
  
        <div class="row">
            <div class="span11">
                <div id="map"></div>
            </div>
        </div>
    </body>
</html>

chevron_right


Output : 

Example 2: The following program uses the GMap plugin to draw circle around the input location.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery GMaps Plugin</title>
        <script type="text/javascript" src=
        </script>
        <script type="text/javascript" src=
        <script type="text/javascript" src="gmaps.js"></script>
        <link rel="stylesheet" href=
        <link rel="stylesheet" type="text/css" href="examples.css" />
  
        <style>
            body {
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            var map;
  
            $(document).ready(function () {
                map = new GMaps({
                    el: "#map",
                    lat: 17.4574683,
                    lng: 78.2822645,
                });
  
                var latitude = 17.4574683;
                var longitude = 78.2822645;
  
                circle = map.drawCircle({
                    lat: latitude,
                    lng: longitude,
                    radius: 451,
                    strokeColor: "#33FFAF",
                    strokeOpacity: 1,
                    strokeWeight: 4,
                    fillColor: "#33FFAF",
                    fillOpacity: 0.5,
                });
  
                for (var i in paths) {
                    bounds.push(paths[i]);
                }
                var arrayVar = [];
                for (var i in bounds) {
                    latitudeLongitude = 
                      new google.maps.LatLng(bounds[i][0], bounds[i][1]);
                    arrayVar.push(latitudeLongitude);
                }
                for (var i in paths) {
                    latitudeLongitude = 
                      new google.maps.LatLng(paths[i][0], paths[i][1]);
                    arrayVar.push(latitudeLongitude);
                }
                map.fitLatLngBounds(arrayVar);
            });
        </script>
    </head>
    <body>
        <h1 style="color: green;">GeeksForGeeks</h1>
        <b>Draw circle using GMaps Plugin</b>
          
<p></p>
  
        <div class="row">
            <div class="span11">
                <div id="map"></div>
            </div>
        </div>
    </body>
</html>

chevron_right


Output : 

Example 3: The following program demonstrates the event handling feature of the plugin. It shows messages on click and drag events.



html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery GMaps Plugin Event handling</title>
        <script type="text/javascript" src=
        </script>
        <script type="text/javascript" src=
        <script type="text/javascript" src="gmaps.js"></script>
        <link rel="stylesheet" href=
        <link rel="stylesheet" type="text/css" href="examples.css" />
  
        <style>
            body {
                text-align: center;
            }
  
            .eventClass {
                width: 90%;
                text-align: center;
                font-weight: bold;
                padding: 10px;
                box-sizing: content-box;
            }
        </style>
        <script type="text/javascript">
            var map;
  
            $(document).ready(function () {
                map = new GMaps({
                    el: "#map",
                    zoom: 15,
                    lat: 17.4574683,
                    lng: 78.2822645,
                    click: function (e) {
                        var info = "Click event occured!";
                        $("#ClickEventDivID").text(info);
                    },
                    dragend: function (e) {
                        var info = "User dragged a location !";
                        $("#DragEventDivID").text(info);
                    },
                });
            });
        </script>
    </head>
    <body>
        <h1 style="color: green;">GeeksForGeeks</h1>
        <b>jQuery GMaps Plugin Event handling </b>
          
<p></p>
  
        <div class="row">
            <div class="span11">
                <div id="map"></div>
            </div>
        </div>
        <br />
        <br />
        <div id="ClickEventDivID" class="eventClass"></div>
        <div id="DragEventDivID" class="eventClass"></div>
    </body>
</html>

chevron_right


Output : 

 

Example 4: The following example demontsrates OpenStreetMap map type of the GMap plugin. 

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery GMaps Plugins Map Types</title>
        <script type="text/javascript" src=
        </script>
        <script type="text/javascript" src=
        <script type="text/javascript" src="gmaps.js"></script>
  
        <link rel="stylesheet" href=
        <link rel="stylesheet" type="text/css" href="examples.css" />
        <style>
            body {
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            var map;
            $(document).ready(function () {
                map = new GMaps({
                    el: "#map",
                    lat: 17.47514,
                    lng: 78.3003,
                    mapTypeControlOptions: {
                        mapTypeIds: ["hybrid", "roadmap", "satellite", 
                                               "terrain", "osm", "cloudmade"],
                    },
                });
  
                map.addMapType("osm", {
                    getTileUrl: function (coord, zoom) {
                        return "http://tile.openstreetmap.org/
                          + zoom + "/" + coord.x + "/" + coord.y + ".png";
                    },
                    tileSize: new google.maps.Size(256, 256),
                    name: "OpenStreetMap",
                    maxZoom: 15,
                });
  
                map.setMapTypeId("osm");
            });
        </script>
    </head>
    <body>
        <h1 style="color: green;">GeeksForGeeks</h1>
        <b>jQuery GMaps Plugin Open Street Map </b>
          
<p></p>
  
        <div class="row">
            <div class="span11">
                <div id="map"></div>
            </div>
        </div>
    </body>
</html>

chevron_right


Output : 

Example 5: The following example demonstrates adding layers to the location in map which is shown in the output image.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery GMaps Layers Maps</title>
        <script src=
        </script>
        <script src=
        </script>
        <script src="gmaps.js"></script>
        <link rel="stylesheet" href=
        <link rel="stylesheet" type="text/css" href="examples.css" />
        <style>
            body {
                text-align: center;
            }
        </style>
  
        <script type="text/javascript">
            var map;
  
            $(function () {
                map = new GMaps({
                    el: "#map",
                    lat: 17.4574683,
                    lng: 78.2822645,
                    zoom: 3,
                });
  
                map.addLayer("weather", {
                    clickable: true,
                });
  
                map.addLayer("traffic");
            });
        </script>
    </head>
    <body>
        <h1 style="green">GeeksForGeeks</h1>
        <b>jQuery GMaps Adding layers Feature</b>
          
<p></p>
  
        <div class="row">
            <div class="span11">
                <div id="map"></div>
            </div>
        </div>
    </body>
</html>

chevron_right


Output : 
 

There are many more variety of ways to make use of google maps using GMap plugin. The programmer can make use of all these depending on the application’s requirement.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.