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=
"http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
        </script>
        <script type="text/javascript" src=
"http://maps.google.com/maps/api/js?sensor=true">
         </script>
        <script type="text/javascript" src="gmaps.js"></script>
  
        <link rel="stylesheet" href=
 "http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
        <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






                        filter_none










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= 


 "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 


        </script> 


        <script type="text/javascript" src= 


"http://maps.google.com/maps/api/js?sensor=true"></script> 


        <script type="text/javascript" src="gmaps.js"></script> 


        <link rel="stylesheet" href= 


"http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" /> 


        <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







                        filter_none










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= 


 "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 


        </script> 


        <script type="text/javascript" src= 


 "http://maps.google.com/maps/api/js?sensor=true"></script> 


        <script type="text/javascript" src="gmaps.js"></script> 


        <link rel="stylesheet" href= 


"http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" /> 


        <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







                        filter_none










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= 


 "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 


        </script> 


        <script type="text/javascript" src= 


 "http://maps.google.com/maps/api/js?sensor=true"></script> 


        <script type="text/javascript" src="gmaps.js"></script> 


  


        <link rel="stylesheet" href= 


"http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" /> 


        <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







                        filter_none










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= 


"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 


        </script> 


        <script src= 


"http://maps.google.com/maps/api/js?sensor=true&libraries;=weather"> 


        </script> 


        <script src="gmaps.js"></script> 


        <link rel="stylesheet" href= 


"http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" /> 


        <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







                        filter_none










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
    

    

        
        

            
            
        

    


Recommended Posts:
geetanjali16
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 : 
JQuery

           	
        

         

         
 
         
        Be the First to upvote.

                

        



        
        
        
        
        

    

            

            0
            

            

                             No votes yet.
                    

            
            
            
            
            
        

        
        

        

        

        

        

        

        


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