A highly configurable custom element for use in your Aurelia applications for inserting Google Maps into your application.

jspm install npm:aurelia-google-maps

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('aurelia-google-maps', config => {
            config.options({
                apiKey: 'myapiKey'
            });
        })
}

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

Provide standard latitude and longitude values.

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

Provide a string as an address which then gets geocoded and the map is centred on this particular address.

<template>
    <google-map address="1600 Amphitheatre Parkway. Mountain View, CA 94043"></google-map>    
</template>

Taking the first example, lets 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>

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.

It is possible to catch the map click events as specified by the Google Maps documentation. The map click event is added as a CustomEvent to the <google-map> DOM element with the event data added to the detail key. Example:

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

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

• latitude: A latitude value for the map
• longitude: A longitude value for the map
• address: Provide an address that gets geocoded into latitude and longitude coordinates
• zoom: A zoom value, default is 8
• disableDefaultUI: A boolean of true or false. Default is false.

• map-click: Delegate a handler with map-click.delegate="callback($event)"

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

• Expand upon markers ability to allow markers supplied by plugin to add themselves
• Add in more configuration options
• Work on making the custom element easier to extend
• Work on supporting click events and events inside of the map, with callbacks support