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()
{aureliause}
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.
Address
Provide a string as an address which then gets geocoded and the map is centred on this particular address.
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.
Automatically update bounds from markers
Automatically adjust the bounds of the map by using the provided markers
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.
Map Type
Set the Google Basic Map Type. See docs
Supported Constants
- HYBRID - This map type displays a transparent layer of major streets on satellite images.
- ROADMAP - This map type displays a normal street map.
- SATELLITE - This map type displays satellite images.
- TERRAIN - This map type displays maps with physical features such as terrain and vegetatio
Example
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
{var latLng = eventdetaillatLnglat = latLnglng = latLng;}
Event Aggregation
In addition to the map-click
event mentioned above, there are several events
propagated via the Aurelia Event Aggregator framework:
-
googlemap:click
- The equivalent of themap-click
above -
googlemap:bounds_changed
- emitted when the map is dragged or zoomed, payload is the new map bounds as aLatLngBounds
object. -
googlemap:marker:click
- emitted when a map marker is clicked, payload is theMarker
object for the clicked marker -
googlemap:marker:mouse_over
- emitted when the mouse enters the marker, payload is theMarker
object for the entered marker -
googlemap:marker:mouse_out
- emitted when the mouse exits the marker, payload is theMarker
object for the exited marker -
googlemap:infowindow:domready
- emitted when the infoWindow is fully loaded, payload is theInfoWindow
object for the related marker
Render array of markers
Markers can be bound to the element with the markers
attribute like below:
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: -27451673longitude: 153043981address: '1 Avenue B New York, NY 10009'latitude: 37754582longitude: -122446418icon: '/images/bullseye.png'title: 'My Big Target'custom: id: 123456infoWindow: 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 km (208 mi) south west of the nearest large town, Alice Springs; 450 km (280 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
latitude
(required)longitude
(required)icon
(optional) - string|Icon|Symbol - see docslabel
(optional) - string|MarkerLabel - see docstitle
(optional) - string - Rollover text, see docscustom
(optional) - store arbitrary data (e.g. anid
field) in this object, retrieve it from thegooglemap:marker:click
event payloadinfoWindow
(optional) - object - If set, thegooglemap:marker:click
evetn will not be called, instead an infowindow containing the given content will show up - see docs
Supported Properties
- 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. (use disable-default-ui="true")
Example:
- markers: An array of objects with key/value pairs as described above.
- options: A Google Maps options object specified here
Supported Events
- map-click: Delegate a handler with
map-click.delegate="callback($event)"
Todo
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
-
Allow more marker options (color, label, etc.)