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:

 DATA TYPE

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

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

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

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.

Y nuestro resultado en la pagina es el siguiente:

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