Home

Awesome

aurelia-google-maps (for Aurelia 1)

Join the chat at https://gitter.im/Vheissu/aurelia-google-maps A highly configurable custom element for use in your Aurelia applications for inserting Google Maps into your application.

To Install

Webpack/Aurelia CLI

npm install aurelia-google-maps --save

CLI User?

The Aurelia CLI requires some additional configuration to use this plugin. Open up your aurelia.json file located in the aurelia_project directory and at the bottom of the dependencies section add in the following:

{
    "name": "aurelia-google-maps",
    "path": "../node_modules/aurelia-google-maps/dist/amd",
    "main": "index"
}

Jspm

jspm install aurelia-google-maps

Configuring For Use

Inside of your main.js/main.ts file simply load the plugin inside of the configure method using .plugin()

export function configure(aurelia) {
    aurelia.use
        .plugin(PLATFORM.moduleName('aurelia-google-maps'), config => {
            config.options({
                apiKey: 'myapiKey', // use `false` to disable the key
                apiLibraries: 'drawing,geometry', //get optional libraries like drawing, geometry, ... - comma seperated list
                options: { panControl: true, panControlOptions: { position: 9 } }, //add google.maps.MapOptions on construct (https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions)
                language:'' | 'en', // default: uses browser configuration (recommended). Set this parameter to set another language (https://developers.google.com/maps/documentation/javascript/localization)
                region: '' | 'US' // default: it applies a default bias for application behavior towards the United States. (https://developers.google.com/maps/documentation/javascript/localization)
                markerCluster: {
                    enable: false,
                    src: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/99a385c1/markerclusterer/src/markerclusterer.js', // self-hosting this file is highly recommended. (https://developers.google.com/maps/documentation/javascript/marker-clustering)
                    imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/tree/master/markerclusterer/images/m', // the base URL where the images representing the clusters will be found. The full URL will be: `{imagePath}{[1-5]}`.`{imageExtension}` e.g. `foo/1.png`. Self-hosting these images is highly recommended. (https://developers.google.com/maps/documentation/javascript/marker-clustering)
                    imageExtension: 'png',
                }
            });
        })
}

Using It

Now you have Google Maps configured, to use it simply use the custom element <google-map></google-map> in your views.

Latitude/Longitude

Provide standard latitude and longitude values.

<template>
    <google-map latitude="37.323" longitude="-122.0527"></google-map>
</template>

Address

In prior versions, it was possible to bind a property named address to the map. This was removed in favor of importing the GoogleMapsAPI service and geocoding the address. In many cases, you'll receive multiple results back from the geocoding service and you may wish to allow the user to select the option.

Zooming A Map

Taking the first example, let's add a zoom attribute and supply a value of 15. By default this is 8 if you do not supply a zoom value.

<template>
    <google-map latitude="37.323" longitude="-122.0527" zoom="15"></google-map>
</template>

Automatically update bounds from markers

Automatically adjust the bounds of the map by using the provided markers

<template>
    <google-map markers.bind="myMarkers" auto-update-bounds="true"></google-map>
</template>

These properties also support working with Aurelia's databinding, so you can bind any of the above to variables in your viewmodel and the map updates when these values are changed.

Map loaded callback (with map reference)

When the map is loaded and instantiated, you can call a function inside of your view-model.

<template>
    <google-map map-loaded.call="myLoadedCallback(map, $event)"></google-map>
</template>

Map Type

Set the Google Basic Map Type. See docs

Supported Constants
Example
<template>
    <google-map markers.bind="myMarkers" map-type="HYBRID"></google-map>
</template>

Map Click Event

It is possible to catch the map click events as specified by the Google Maps documentation. The map's click event is added as a CustomEvent to the <google-map> DOM element with the event data added to the detail key. Some events are also propagated via Aurelia's Event Aggregator.

Example

<google-map map-click.delegate="myEventHandler($event)"></google-map>

myEventHandler(event) {
    var latLng = event.detail.latLng,
        lat = latLng.lat(),
        lng = latLng.lng();
}

Event Aggregation

In 2.0 of this plugin, there were several events propagated via the Aurelia Event Aggregator.

These events are now handled as DOM events. See here

Render array of markers

Markers can be bound to the element with the markers attribute like below:

<google-map markers.bind="myMarkers"></google-map>

This markers variable should be an array of objects with at minimum either both the latitude and longitude key/value pairs or just the address key/value pair. Addresses for which geocoding fails get logged to the console as info:

var myMarkers = [
	{
        latitude: -27.451673,
        longitude: 153.043981
    },
    {
       address: '1 Avenue B New York, NY 10009'
    },
    {
        latitude: 37.754582,
        longitude: -122.446418,
        icon: '/images/bullseye.png',
        title: 'My Big Target',
        custom: {id: 123456},
        infoWindow: {content: `
                <div id="content">
                  <div id="siteNotice"></div>
                  <h1 id="firstHeading" class="firstHeading">Uluru</h1>
                  <div id="bodyContent">
                    <p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large sandstone rock formation in the southern part of the Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) south west of the nearest large town, Alice Springs; 450&#160;km (280&#160;mi) by road. Kata Tjuta and Uluru are the two major features of the Uluru - Kata Tjuta National Park. Uluru is sacred to the Pitjantjatjara and Yankunytjatjara, the Aboriginal people of the area. It has many springs, waterholes, rock caves and ancient paintings. Uluru is listed as a World Heritage Site.</p>
                    <p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">https://en.wikipedia.org/w/index.php?title=Uluru</a> last visited June 22, 2009).</p>
                  </div>
                </div>`}
    }
];

Supported marker properties

Marker clustering

This options allows the clustering of markers that are near each other. All the config and styling options can be found here.

<a name="drawing-mode"></a>Drawing Mode

Allows usage of Google Maps' Drawing API to add Markers, Polylines, Polygons, Rectangles and Circles to the map instance. To allow this, simply set the defaults as below:

<google-map draw-enabled.bind="true" draw-mode="polygon"></google-map>

The draw-mode can take the same values as defined here

Drawing Events

One of the drawing events has been exposed to the element as a CustomEvent and a callback can be set as below:

<google-map map-overlay-complete.delegate="callback($event)"></google-map>

The event object is the same as given here with the addition of the encoded variable. This is the encoded polyline (you can play around with it here).

In addition to the map-overlay-complete event, an event is also propagated through Aurelia's Event Aggregator:

Supported Properties

Example:
<google-map disable-default-ui="true"></google-map>

<a name="supported-events"></a>Supported Events

Todo

This element still is missing some features, but they are in development.