How to load google maps javascript api into Aurelia javascript app?
I found the google-maps-api npm module and installed it (npm install google-maps-api), but I cannot figure out how to import it using systemjs / jspm (jspm cannot find this module). Here's the config from my config.js:
"paths": {
"*": "app/dist/*.js",
"github:*": "app/jspm_packages/github/*.js",
"npm:*": "app/jspm_packages/npm/*.js" }
So when I try to do something like this:
import {mapsapi} from 'google-maps-api';
I am getting the following error in the browser console:
GET https: // localhost: 44308 / app / dist / google-maps-api.js 404 (not found)
Looking at the filesystem, I can see that npm has installed the module under app / node_modules / google-maps-api, so how can I refer to it in the import clause from the Aurelia module?
source to share
I found a solution and will answer my own question:
I finally figured out how to install it using jspm, so you just need to give jspm hint to install it from npm, like:
jspm install npm: google-maps-api
After the jspm finishes setting import (no {} syntax) works fine:
import mapsapi from 'google-maps-api';
then I paste it into the constructor and instantiate the geocoder api:
@inject(mapsapi('InsertYourGMAPIKeyHere'))
export class MyClass {
constructor(mapsapi) {
let that = this;
let maps = mapsapi.then( function(maps) {
that.maps = maps;
that.geocoder = new google.maps.Geocoder();
});
...
}
To create a map on a div, I use EventAggregator to subscribe to a router: navigation: full event and use setTimeout to schedule the map creation:
this.eventAggregator.subscribe('router:navigation:complete', function (e) {
if (e.instruction.fragment === "/yourRouteHere") {
setTimeout(function() {
that.map = new google.maps.Map(document.getElementById('map-div'),
{
center: new google.maps.LatLng(38.8977, -77.0366),
zoom: 15
});
}, 200);
}
});
source to share
Here is a complete example of a view model that it uses attached()
to communicate with your view.
import {inject} from 'aurelia-framework';
import mapsapi from 'google-maps-api';
@inject(mapsapi('your map key here'))
export class MapClass {
constructor(mapsAPI) {
this.mapLoadingPromise = mapsAPI.then(maps => {
this.maps = maps;
});
}
attached() {
this.mapLoadingPromise.then(() => {
var startCoords = {
lat: 0,
long: 0
};
new this.maps.Map(document.getElementById('map-div'), {
center: new this.maps.LatLng(startCoords.lat, startCoords.long),
zoom: 15
});
});
}
}
source to share
For anyone using Typescript and getting the "Cannot find module 'google-maps-api' error, you need to add typing to the solution. Something like this works
declare module 'google-maps-api' {
function mapsapi(apikey: string, libraries?, onComplete?);
namespace mapsapi {
}
export = mapsapi;
}
and then import it like this
import * as mapsapi from 'google-maps-api';
source to share