Publicación destacada

Código HTML y Javascript de mapa, rutas y geolocalización - API de Google Maps 💻

el
0

¿Cómo ubicar dos puntos en un mapa de Google Maps utilizando JavaScript y HTML? - ADMSoftCorp 💻

el

Para ubicar dos puntos en un mapa de Google Maps utilizando JavaScript y HTML, puedes seguir estos pasos:


Obtén una clave de API de Google Maps:


  1. Accede a la consola de desarrolladores de Google.
  2. Crea un nuevo proyecto o selecciona uno existente.
  3. Habilita la API de Google Maps JavaScript y obtén tu clave de API.


Crea un archivo HTML


Crea un archivo HTML básico que incluya la referencia a la API de Google Maps y el código JavaScript para mostrar el mapa.


Html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapa de Google</title>
    <!-- Reemplaza 'TU_CLAVE_DE_API' con tu clave de API de Google Maps -->
    <script src="https://maps.googleapis.com/maps/api/js?key=TU_CLAVE_DE_API&callback=inicializarMapa" async defer></script>
</head>

<body>
    <div id="mapa" style="height: 400px; width: 100%;"></div>
    <script>

        function inicializarMapa() {
            // Código para inicializar el mapa y ubicar puntos
        }

    </script>

</body>
</html>


Añade el código JavaScript


En la función inicializarMapa, puedes utilizar la API de Google Maps para crear un mapa y añadir marcadores para los dos puntos.


Javascript

function inicializarMapa() {

    // Coordenadas del primer punto
    var punto1 = { lat: 40.7128, lng: -74.0060 };

    // Coordenadas del segundo punto
    var punto2 = { lat: 34.0522, lng: -118.2437 };

    // Opciones del mapa
    var opcionesMapa = {
        center: punto1,
        zoom: 5
    };

    // Crear el mapa

    var mapa = new google.maps.Map(document.getElementById('mapa'), opcionesMapa);

    // Añadir marcador para el primer punto
    var marcador1 = new google.maps.Marker({
        position: punto1,
        map: mapa,
        title: 'Punto 1'
    });

    // Añadir marcador para el segundo punto
    var marcador2 = new google.maps.Marker({
        position: punto2,
        map: mapa,
        title: 'Punto 2'
    });

}


Asegúrate de reemplazar las coordenadas en punto1 y punto2 con las coordenadas reales de los puntos que deseas mostrar en el mapa.


Ejecuta el archivo HTML


Guarda tu archivo HTML como index.html y ábrelo en un navegador web. Deberías ver un mapa con dos marcadores que representan los puntos especificados.


Ten en cuenta que este es un ejemplo básico y puedes personalizarlo según tus necesidades. Además, ten en cuenta las políticas y términos de uso de la API de Google Maps al utilizarla en tu aplicación.


Clic para ver videos del tema en Youtube


Figure 1. ubicar dos puntos en un mapa de Google Maps con JavaScript y HTML - sybcodex.com
Figure 1. ubicar dos puntos en un mapa de Google Maps con JavaScript y HTML - sybcodex.com

Aviso sobre el contenido


Este Blog no se hace responsable del mal uso de la información compartida, todo es presentado solo con fines educativos y de entretenimiento.


Es importante señalar que el contenido de este artículo tiene un enfoque informativo y de entretenimiento, por lo que podría contener información que no es verídica. Por esta razón, si tienes la intención de utilizar esta publicación para hacer trabajos académicos o investigaciones, te recomiendo encarecidamente que realices una exhaustiva investigación adicional. Es fundamental que filtres los contenidos y verifiques la información mediante fuentes académicas confiables, como revistas científicas y repositorios de alta credibilidad.


El contenido educativo aquí proporcionado no pretende sustituir el asesoramiento, guía o enseñanza proporcionada por profesionales o instituciones especializadas. Cualquier decisión o acción tomada por los lectores o usuarios con base en la información presentada en este contenido es responsabilidad exclusiva de cada individuo.


En caso de que se requiera asesoramiento específico o experto en un área particular, se alienta a los usuarios a buscar la orientación de profesionales o expertos cualificados en el campo correspondiente.


Si les sale error al ejecutar el código del programa o Query o script compartido puede deberse a factores técnicos de software, tipeo, estructura de código, versión o de librerías desfasadas.


Las licencias de software libre y de código abierto permiten a los desarrolladores utilizar y modificar el código fuente de un proyecto, lo que puede fomentar la innovación y el avance tecnológico.


El código, script, software y Query compartido en este post o publicación está bajo licencia de software libre, y si lo llegan a compartir opcionalmente pueden poner el nombre y la web del desarrollador <Sybcodex/>.


Referencias


DALL·E 2 (openai, 2023). Ilustración de este artículo. [Figure 1]. Generado en https://openai.com/dall-e-2/


Redactor: Sybcodex (Joel Sotelo Bustamante)

Categoría: Tecnología - ADMSoftCorp

Título del artículo: ¿Cómo ubicar dos puntos en un mapa de Google Maps utilizando JavaScript y HTML?

Número de edición: 1.0

Escrito en el año: 2023

-----------------------------------------------

Tienda online de libros: 👉 Book Sh💓p

©Todos los derechos reservados al autor.


Comentarios

Publicar un comentario

Nuestras redes sociales

Entradas relacionadas

Contenido relacionado