13
Apr

Paquete - Google Maps con Angular JS

El paquete Google Maps con Angular es un paquete que ha sido implementado desde las primeras versiones de Umbraco. Ahora con las ultimas actualizaciones del administrador se ha actualizado para usar nuevas tecnologías como Angular JS.

PAQUETE

Lo primero que debemos hacer es descargar el paquete del repositorio de umbraco (https://our.umbraco.org/projects/backoffice-extensions/angulargooglemaps) o podemos instalar el paquete directamente desde nuestro Umbraco:

 Google maps angular instalacion

 DATA TYPE

Luego debemos crear un nuevo data type o tipo de dato en la sección Developer:

 Google maps angular propiedades data type

Este tipo de dato nos permite configurar las siguientes opdiones:

  1. Ubicacion por defecto: es la ubicaciones que se mostrara por defecto en la seccion de contenido, y debe ser longitud,latitud,zoom
  2. Tamaño del mapa: se configura el tamaño del mapa en pixeles
  3. Ocultar búsqueda: selecciona si quieres ver el campo de búsqueda en el editor de contenido
  4. Ocultar etiqueta: selecciona si quieres ver la etiqueta en el editor de contenido
  5. Oculta, muestra o permite la seleccion de cordenadas a ser mostradas y/o editadas.
  6. Icono: selecciona el icono que se quiere usar para marcar la posición en el mapa

DOCUMENT TYPE

Luego agregamos nuestro nuevo data type o tipode dato a un document type o tipo de documento donde queremos administrar el contenido

Google maps angular document type

Una vez agregado el campo administrable debe mostrarse de la siguiente forma:

Google maps angular contenido

MACRO - RAZOR (PARTIAL VIEW MACRO)

Ahora la parte que mas nos gusta, la forma como debemos mostrar nuestro mapa en el sitio para esto debemos crear un macro Razor en el cual vamos a obtener las coordenadas y con ayuda del API de Google Maps mostrar nuestra ubicación.

google maps angular razor macro

Y nuestro resultado en la pagina es el siguiente:

google maps angular resultado

Tambien lo puedes ver en: http://www.umbracolombia.com/oficinas/bogota

Si quieres modificar opciones del mapa, menú contextuales, o agregar características de Google Maps puedes revisar los siguientes ejemplos:

https://developers.google.com/maps/documentation/javascript/examples/marker-simple?hl=es

2015 © Umbracolombia - Solido. All rights reserved.
Error loading MacroEngine script (file: UC_Global_Scripts.cshtml)