How to load google maps javascript api in Aurelia javascript application?

Question

I found npm module google-maps-api and installed it (npm install google-maps-api) but I can't figure out how to import it with systemjs/jspm (jspm cannot find this module). Here's the configuration from my config.js:

"paths": {
"*": "app/dist/*.js",
"github:*": "app/jspm_packages/github/*.js",
"npm:*": "app/jspm_packages/npm/*.js" }

So, when I try do something like this:

import {mapsapi} from 'google-maps-api';

I get the following error in browser console:

GET https://localhost:44308/app/dist/google-maps-api.js 404 (Not Found)

Looking at the filesystem I see that npm installed the module under app/node_modules/google-maps-api so how do I reference it in the import clause from Aurelia module?

Answer 1

I found a solution and answering my own question here:

I finally figured how to install it with jspm, so you just need to give a hint to jspm to install it from npm like so:

jspm install npm:google-maps-api

After jspm completes installation, import (no {} syntax) works fine:

import mapsapi from 'google-maps-api';

then I inject it in constructor and instantiate 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();
        });
...
}

In order to create map on a div I use EventAggregator to subscribe for router:navigation:complete event and use setTimeout to schedule 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);
        }
    });

Answer 2

Here's a complete view-model example that uses attached() to link to 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
            });
        });
    }
}

Answer 3

For everyone using Typescript and getting "Cannot find module 'google-maps-api'" error, you need to add typings 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';