Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Ejercicio API Maps

    Cargado por

    Jessica Martinez
    21 vistas2 páginas
    Este documento proporciona instrucciones para crear una aplicación web básica que muestra un mapa de Google utilizando la API de Maps JavaScript. Explica cómo obtener una clave API de Google, invocar la API de Maps, crear e inicializar un mapa, y agregar marcadores. También incluye código de ejemplo para un archivo HTML, CSS y JavaScript para mostrar un mapa centrado en Bogotá con un marcador.

    Descripción original:

    Título original

    Ejercicio API Maps.docx

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Este documento proporciona instrucciones para crear una aplicación web básica que muestra un mapa de Google utilizando la API de Maps JavaScript. Explica cómo obtener una clave API de Google, invocar la API de Maps, crear e inicializar un mapa, y agregar marcadores. También incluye código de ejemplo para un archivo HTML, CSS y JavaScript para mostrar un mapa centrado en Bogotá con un marcador.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    21 vistas2 páginas

    Ejercicio API Maps

    Cargado por

    Jessica Martinez
    Este documento proporciona instrucciones para crear una aplicación web básica que muestra un mapa de Google utilizando la API de Maps JavaScript. Explica cómo obtener una clave API de Google, invocar la API de Maps, crear e inicializar un mapa, y agregar marcadores. También incluye código de ejemplo para un archivo HTML, CSS y JavaScript para mostrar un mapa centrado en Bogotá con un marcador.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 2

    JavaScript – API Maps - Excercise

    Ing. Erick Sang R.

    Ejercicio Uso API Google Maps

    Google maps posee MAPS JAVASCRIPT API, una de las APIs más utilizada en programación para visualización de
    mapas.

    Todas las aplicaciones con esta API requieren una clave única (key) que se debe obtener de la página de google: clave
    de API.

    El siguiente código incorpora un archivo css con la configuración de estilo llamado: mapa.css que crearemos
    posteriormente: <link rel="stylesheet" type="text/css" href="mapa.css" media="screen" />

    Se invoca la API de maps: <script src="https://maps.googleapis.com/maps/api/js? key=...

    Se crea una variable llamada map y se configura el mapa inicial con la función initMap: var map; func….

    Se agrega un marcador (punto en el mapa): var marker = new google.maps …

    Cree un archivo html y copie el siguiente código:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
    <title>Maps JavaScript API</title>
    <link rel="stylesheet" type="text/css" href="mapa.css" media="screen" />
    </head>
    <body>
    <div id ="map"> </div>
    <script src="https://maps.googleapis.com/maps/api/js?
    key=AIzaSyBCKiIqCdZGrVxx06LSbe7uG3zXOq1Cz5k&callback=initMap" async defer>
    </script>

    <script>
    var map;
    function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 4.633549, lng: -74.055}, zoom: 13,
    });

    var marker = new google.maps.Marker({


    position: {lat: 4.632549, lng: -74.065},
    map: map,
    title: 'Unipiloto'
    });
    }
    </script>

    </body>
    </html>

    Cree el archivo CSS llamado “mapa.css” y copie el siguiente código:

    Page 1
    #map {
    height: 90%;
    }

    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }

    Analice, ejecute y pruebe el anterior código, luego cambie el mapa para que muestre un sector de Bogotá familiar para
    usted y agregue al menos tres marcadores para sitios que frecuente constantemente.

    Page 2

    También podría gustarte