¿Cómo crear un mapa simple usando jQuery?

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS, o más precisamente, el Modelo de objetos del documento (DOM) y JavaScript.

¿Qué son los mapas de Google?

Google Map es una tecnología y una aplicación de servicio de mapas basada en web gratuita proporcionada por Google. La aplicación proporciona información completa sobre regiones geográficas, mapas de calles y el planificador de rutas para viajar en automóvil, a pie o en transporte público. Vistas satelitales de los países de todo el mundo.

HTML Google Map se puede utilizar para mostrar los mapas en la página web. Uno puede simplemente agregar una página HTML de mapa.

Sintaxis:

<!DOCTYPE html>  
<html>  
<body>  
<h1Map Example</h1>  
<div id="map">Enter text</div>  
</body>  

Establecer el tamaño del mapa

Sintaxis:

<div id="map" 
style="width:400px;height:400px;background:grey">
</div>

Crear una función para establecer las propiedades del mapa

Las propiedades del mapa se pueden establecer creando una función. Tenemos que utilizar las funcionalidades de Google Maps API proporcionadas por una biblioteca de JavaScript ubicada en Google.

<script src=
"https://maps.googleapis.com/maps/api/js?callback=myMap">
    </script>

Crear un mapa

  • En el ejemplo anterior, utilizaremos la API de Google para cargar el mapa de Google.
<script src = "https://maps.googleapis.com/maps/api/js"></script>
var CustomOp = {
    center:new google.maps.LatLng(28.502212, 77.405603), 
    zoom:17, 
    mapTypeId:google.maps.MapTypeId.ROADMAP
};
  • En este caso, CustomOp es un objeto que contiene 3 opciones, centro , zoom y maptypeid .
    • centro: esta propiedad se utiliza para establecer el punto específico en los mapas.
    • zoom: Esta propiedad se utiliza para especificar el nivel de zoom en un punto específico.
    • maptypeid: Esta propiedad se utiliza para especificar el tipo de mapa. (HOJA DE RUTA, SATÉLITE, HÍBRIDO, TERRENO)

Para personalizar el mapa de Google, se proporcionan cuatro tipos de mapas.

  • HOJA DE RUTA: este tipo de mapa muestra la vista de la calle del área específica. Es el tipo de mapa predeterminado.
  • SATÉLITE: Este tipo de mapa muestra las imágenes satelitales del área específica.
  • HÍBRIDO: este tipo de mapa muestra las principales calles del área específica.
  • TERRENO: Este tipo de mapa muestra el terreno y la vegetación.

Ejemplo 1: HOJA DE RUTA 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Google Maps | Types
    </title>
 
    <!-- Add Google map API source -->
    <script src =
        "https://maps.googleapis.com/maps/api/js">
    </script>
        
    <script>
        function GFG() {
            var CustomOp = {
                center:new google.maps.LatLng(
                        28.502212, 77.405603),
                zoom:17,
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
              
            // Map object
            var map = new google.maps.Map(
                document.getElementById("DivID"),
                CustomOp
            );
        }
    </script>
</head>
 
<!-- Function that execute when page load -->
<body onload = "GFG()">
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
         
        <h3>Google Maps</h3>
         
        <!-- Basic Container -->
        <div id = "DivID" style =
            "width:400px; height:300px;">
        </div>
    </center>
</body>
     
</html>

Salida: Ejemplo 2: SATÉLITE 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Google Maps | Types
    </title>
 
    <!-- Add Google map API source -->
    <script src =
        "https://maps.googleapis.com/maps/api/js">
    </script>
        
    <script>
        function GFG() {
            var CustomOp = {
                center:new google.maps.LatLng(
                        28.502212, 77.405603),
                zoom:17,
                mapTypeId:google.maps.MapTypeId.SATELLITE
            };
              
            // Map object
            var map = new google.maps.Map(
                document.getElementById("DivID"),
                CustomOp
            );
        }
    </script>
</head>
 
<!-- Function that execute when page load -->
<body onload = "GFG()">
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
         
        <h3>Google Maps</h3>
         
        <!-- Basic Container -->
        <div id = "DivID" style =
            "width:400px; height:300px;">
        </div>
    </center>
</body>
     
</html>

Salida: Ejemplo 3: HÍBRIDO 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Google Maps | Types
    </title>
 
    <!-- Add Google map API source -->
    <script src =
        "https://maps.googleapis.com/maps/api/js">
    </script>
        
    <script>
        function GFG() {
            var CustomOp = {
                center:new google.maps.LatLng(
                        28.502212, 77.405603),
                zoom:17,
                mapTypeId:google.maps.MapTypeId.HYBRID
            };
              
            // Map object
            var map = new google.maps.Map(
                document.getElementById("DivID"),
                CustomOp
            );
        }
    </script>
</head>
 
<!-- Function that execute when page load -->
<body onload = "GFG()">
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
         
        <h3>Google Maps</h3>
         
        <!-- Basic Container -->
        <div id = "DivID" style =
            "width:400px; height:300px;">
        </div>
    </center>
</body>
     
</html>

Salida: Ejemplo 4: TERRENO 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Google Maps | Types
    </title>
 
    <!-- Add Google map API source -->
    <script src =
        "https://maps.googleapis.com/maps/api/js">
    </script>
        
    <script>
        function GFG() {
            var CustomOp = {
                center:new google.maps.LatLng(
                        28.502212, 77.405603),
                zoom:17,
                mapTypeId:google.maps.MapTypeId.TERRAIN
            };
              
            // Map object
            var map = new google.maps.Map(
                document.getElementById("DivID"),
                CustomOp
            );
        }
    </script>
</head>
 
<!-- Function that execute when page load -->
<body onload = "GFG()">
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
         
        <h3>Google Maps</h3>
         
        <!-- Basic Container -->
        <div id = "DivID" style =
            "width:400px; height:300px;">
        </div>
    </center>
</body>
     
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por sharmaanushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *