Google Maps Javascript API

En esta sección se resolverán dudas relacionadas con la creación de aplicaciones híbridas, haciendo énfasis en temas relacionados con Javascript y frameworks de Javascript como Angular y Jquery.

Moderator: julianmartinez16

Post Reply
User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Google Maps Javascript API

Post by xacarana » Sat Sep 03, 2016 1:48 pm

¿Qué necesitamos para realizar este ejercicio?
Próximante subo el código y un video con la explicación ;)
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Re: Google Maps Javascript API

Post by xacarana » Mon Sep 05, 2016 9:55 am

El código utilizado en la clase, recuerde reemplazar PONER_APY_KEY_AQUI por su llave personal
El siguiente ejemplo permite dibujar una ruta, teniendo en cuenta un conjunto de coordenadas, además se incluyen funciones que permiten obtener las coordenadas de una ruta de marcadores

Code: Select all

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
        </style>
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>

        <style type="text/css">
          html, body { height: 100%; margin: 0; padding: 0; }
          #map { height: 100%; }
          #coordenadas{
            position: fixed;
            width: 300px;
            height: 300px;
            z-index: 999;
            color: white;
            font-size: 10px;
            background-color: rgba(0,0,0,.5);
          }          
        </style>

    </head>
    <body>
        <div id="coordenadas">
          <ul></ul>
        </div>
        <div id="map"></div>
        <script type="text/javascript">

          var map;
          var marker;
          var lista;
          var contador_ruta = 0;
          var ruta = [{lat:6.239697863122687,lng:-75.5898642539978},{lat:6.239985825531488,lng:-75.59037923812866},{lat:6.24041243621663,lng:-75.59080839157104},{lat:6.240913703327829,lng:-75.59125900268555},{lat:6.241350978501262,lng:-75.59166669845581},{lat:6.242118875483537,lng:-75.59183835983276},{lat:6.242918766976416,lng:-75.5917739868164},{lat:6.243612005282089,lng:-75.59144139289856},{lat:6.244187925638201,lng:-75.5908727645874},{lat:6.244497215938406,lng:-75.59021830558777},{lat:6.244593202546144,lng:-75.58963894844055},{lat:6.244529211476264,lng:-75.5890703201294},{lat:6.244326573036745,lng:-75.58870553970337},{lat:6.244081273768189,lng:-75.58827638626099},{lat:6.243718657247668,lng:-75.58796525001526},{lat:6.243558679291156,lng:-75.58756828308105},{lat:6.243441362091991,lng:-75.5869996547699},{lat:6.243260053641578,lng:-75.58643102645874},{lat:6.243132071168204,lng:-75.58614134788513},{lat:6.242854775701925,lng:-75.58639883995056},{lat:6.242492158332223,lng:-75.58676362037659},{lat:6.2421722016210675,lng:-75.58709621429443},{lat:6.24188424041393,lng:-75.58738589286804},{lat:6.241617609525444,lng:-75.58764338493347},{lat:6.2413723089881765,lng:-75.5879008769989},{lat:6.241009690592274,lng:-75.58828711509705},{lat:6.240785720281192,lng:-75.58859825134277},{lat:6.240380440427291,lng:-75.58895230293274},{lat:6.240049817156414,lng:-75.58933854103088}];

          window.onload = function()
          {
            lista = document.getElementById("coordenadas").children[0];            
          }

          function pintarRuta(coordenadas)
          {
            /* //Pinta la ruta con relleno
              var ruta = new google.maps.Polygon({
              paths: coordenadas,
              strokeColor: '#FF0000',
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: "#00ff00",
              fillOpacity: 0.35
            });
            ruta.setMap(map);*/

            var ruta = new google.maps.Polyline({
            path: coordenadas,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
            });
            ruta.setMap(map);

          }

          function agregarCoordenada(obj)
          {
            var li = document.createElement("li");
            var coords = "{lat:"+obj.lat()+",lng:"+obj.lng()+"}";
            li.appendChild(document.createTextNode(coords));
            lista.appendChild(li);  
            agregarMarcador(obj);          
          }

          function obtenerRuta()
          {
            var salida = [];
            for(var i in lista.children)
            {
              if(typeof lista.children[i] == 'object')
              {
                salida.push(lista.children[i].innerHTML);
              }
            }
            console.log(salida);
            console.log(JSON.stringify(salida));
          }

          function agregarMarcador(obj)
          {
            marker = new google.maps.Marker({
              position: obj,
              map: map,
              title: ''+(++contador_ruta)
            });
          }

          function initMap() {             
            var myLatlng = {lat: 6.243718657247668, lng: -75.58956384658813};
            map = new google.maps.Map(document.getElementById('map'), {
              center: myLatlng,
              zoom: 16
            });         

            map.addListener('click', function(evt) {
              //console.log(evt.latLng.lat());
              //console.log(evt.latLng.lng());
              agregarCoordenada(evt.latLng);
            });
            pintarRuta(ruta);
          }

        </script>
        
        <script async defer
          src="https://maps.googleapis.com/maps/api/js?key=PONER_APY_KEY_AQUI&callback=initMap">
        </script>
        <!--script src="js/vendor/bootstrap.min.js"></script-->
        <script src="js/main.js"></script>
    </body>
</html>
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

Post Reply