Плагин jQuery GMaps

Опубликовано: 6 Января, 2022

jQuery предоставляет подключаемый модуль GMaps, который помогает программистам использовать карты Google различными способами. Вы должны загрузить необходимые файлы в рабочую папку, чтобы программист мог включить их в раздел заголовка страницы структуры HTML, как это реализовано в следующих программах.

Ссылка для загрузки плагина jQuery GMaps: https://hpneo.dev/gmaps/

В следующих примерах мы используем допустимую широту и долготу существующего местоположения, которые можно получить, введя адрес местоположения в поле управления вводом по приведенной ниже ссылке. Обратите внимание на широту и долготу введенного пользователем адреса для дальнейшей работы с кодом.

https://www.latlong.net/

Пример 1: В следующем примере демонстрируется основной вызов плагина GMaps на основе значений широты и долготы для отображения местоположения на карте.

html

<!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>

Выход :

Пример 2: Следующая программа использует плагин GMap для рисования круга вокруг места ввода.

html

 <!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 > 

Выход :

Пример 3: Следующая программа демонстрирует функцию обработки событий плагина. Он показывает сообщения о событиях щелчка и перетаскивания.

html

<!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>

Выход :

Пример 4: Следующий пример demontsrates OpenStreetMap карту типа плагина GMAP.

html

 <!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 > 

Выход :

Пример 5: В следующем примере демонстрируется добавление слоев в то место на карте, которое показано на выходном изображении.

html

 <!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,

                    
                                            JQuery
                                    
РЕКОМЕНДУЕМЫЕ СТАТЬИКак получить данные атрибутов пользовательских элементов в jQuery?
20 Февраля, 2023
Объясните роль функции обратного вызова в AJAX.
20 Февраля, 2023
Объясните технологии, используемые AJAX.
20 Февраля, 2023
Метод jQuery undelegate()
16 Февраля, 2023
jQuery метод остановки()
16 Февраля, 2023
Метод jQuery slideUp()
16 Февраля, 2023
Метод jQuery mousedown()
16 Февраля, 2023
Метод jQuery mouseenter()
16 Февраля, 2023


    


        
            
                
                    
                        
                        < PROGLER >
                    
                
                
                    
                        Общее
                        
                        Контакты
                        Политика конфиденциальности
                    
                    
                        Обучение
                        Блог
                    
                
            
            
                © progler.ru 2024. Все права защищены.