Creando un mapa con Angular Google Maps

Link

Buen Dia gente, acá andamos esta vez para enseñarles como crear un mapa con Angular Google Maps.

distancecluster

Agregando dependencias:

Lo primero que tenemos que hacer es tener instalada nuestra dependencia de angular google maps, acá te dejo el link para que lo puedas instalar.

https://angular-ui.github.io/angular-google-maps/#!/use

Sobre la configuración

Podemos instalar nuestra dependencia usaremos bower, en la terminar entramos a la carpeta de nuestro proyecto y tecleamos:

   bower install angular-google-maps

Esto traerá a nuestro proyecto algunos archivos, los cuales debemos incluir en el archivo html de la siguiente manera:

 <script src=‘/path/to/lodash[.min].js’>  </script>                                                                                  <script src=‘/path/to/angular[.min].js’></script>                                                                                 <script src=‘/path/to/angular-simple-logger/angular-simple-logger[.min].js’></script>                   <script src=‘/path/to/angular-google-maps[.min].js’></script>

Además debemos incluir la API de Google Maps

              <script src=‘//maps.googleapis.com/maps/api/js?sensor=false’></script>

Hecho esto, ahora debemos hacer que nuestra aplicación angular detecte nuestra nueva dependencia, para esto la  agregaremos  en nuestro archivo js principal:

 angular.module('miAplicacionGoogleMaps', ['uiGmapgoogle-maps']);

Una vez que hemos configurado nuestra dependencia, procederemos a agregar a nuestro archivo js (nuestro controlador) la variable map de la siguiente manera:

Creando el Mapa

$scope.map = { center: { latitude: 24.797568, longitude: -107.3991178 }, 
                   zoom: 14 ,bounds: {}
};

Especificamos nuestro centro del mapa con las coordenadas que deseamos, ademas del zoom que deseamos precargar, y una variable bounds para la verificacion de coordenadas.

En nuestro archivo HTML agregaremos el siguiente código:

<ui-gmap-google-map center=”map.center” zoom=”map.zoom” draggable=”true” options=”options” bounds=”map.bounds”>
</ui-gmap-google-map>

Con esto ya tenemos nuestro mapa, lo que hace este código es, con los datos que nosotros alimentamos en nuestro javascript con la variable map.

Quieres agregar marcadores?

Un uso muy común de nuestro mapa es querer agregar los famosos marcadores(markers), para esto agregaremos a nuestro código HTML lo siguiente:

<ui-gmap-google-map center=”map.center” zoom=”map.zoom” draggable=”true” options=”options” bounds=”map.bounds”>
      <ui-gmap-markers models=”markers” coords=”‘self'” icon=”‘icon'” click=”onClick”>

      </ui-gmap-markers>
</ui-gmap-google-map> 

Con el código anterior especificamos el modelo que utilizara nuestros marcadores, el icono que utilzará nuestro marcador y la función que reconocerá cuando demos click en un marcador.

Por la parte de javascript definiremos nuestro modelos de datos:

$scope.markers = new Array();  //Inicializamos nuestra variable markers

// Una vez que el mapa este cargado, esta función será ejecutada, para crear nuestros markers

$scope.$watch(function() { return $scope.map.bounds; }, function(nv, ov) {
  if (!ov.southwest && nv.southwest) {
  
    var markers = [];
  //Creamos 10 marcadores llamando la función createMarker  
  for (var i = 0; i < 10; i++) {
       markers.push(createMarker(i, $scope.map.bounds)) 
     $scope.markers = markers;
 }}, true);

var  createMarker = function(i,bounds,idKey){

    var lat = parseFloat(somevalidlatitude);
    var long = parseFloat(somevalidlongitude);

    if (idKey == null) {
       idKey = "id"; 
    }
//Creamos un marcador con los parámetros que necesitamos 
   var ret = {
     latitude: lat,
     longitude: long,
     title: 'Este es el marcador '+i,
     show: false
  };
   ret[idKey] = i;
 return ret;
}

Una vez teniendo nuestro codigo listo en nuestra variable $scope.markers, tenemos nuestros marcadores(markers), el código HTML se encargara de renderizar los marcadores en el mapa tal como lo indicamos en esta linea:

  <ui-gmap-markers models=”markers” coords=”‘self'” icon=”‘icon'” click=”onClick”>

   </ui-gmap-markers>

Al final del dia tendremos un resultado mas o menos así:

Screen Shot 2016-04-29 at 6.12.28 PM

Por el dia de hoy es todo, si tienes dudas o preguntas no dudes en contactarme, te dejo mis datos acá abajo.

Saludos

Nicolás Villegas Félix
nikodtb@gmail.com
Practicante Hunabsys R&D
Ing. en Sistemas Computacionales

2 thoughts on “Creando un mapa con Angular Google Maps

  1. Javier

    Hola me ha gustado mucho el tutorial, me gustaría saber como teniendo 2 marquers podemos hacer que google dibuje una ruta entre ellos.

  2. Javier

    Hola me ha gustado mucho el tutorial y quisiera saber como dibujar una ruta entre dos markers.
    utilizando Angular con Google maps.
    Gracias

Leave a Reply

Your email address will not be published. Required fields are marked *