huasofoundries/googlemaps-loader

Loader plugin to add google maps API scripts asynchronously with AMD

Google Maps API Loader

This little helpers provide a way to load Google Maps API dinamically with AMD, CommonJS and SystemJS.

Please note that, starting from version 3.24, Google Maps API requires for you to get an API Key or a client ID (if you have the old Google Maps for Work Plan) and include said parameter on the URL.

This means that, eventhought client and key are optional fields for the next examples, you must declare one of them or you will get a NoApiKeys warning.

RequireJS installation and config

If you want to use these helpers with RequireJS, then install it with

npm install amd-googlemaps-loader

Then add to your config:

requirejs.config({
  "gmaps": {
    "parameters": {
      "v": "3.exp",
      "libraries": "visualization,places,drawing,geometry"
      //, "client": "optional, your client id for google maps for work"
      //, "key":"optional, API key"
    },
  },

  "map": {
    "*": {
      "gmaps": "path_to/amd-googlemaps-loader/requirejs-gmaps!https://maps.googleapis.com/maps/api/js"
      //, ...other mappings you have...
    }
  }
});

JSPM installation and SystemJS config

If you're using google maps with JSPM and or SystemJS, install it with:

jspm install gmap=npm:amd-googlemaps-loader

Then add to your config:

System.config({
  paths: {
      "github:*": "jspm_packages/github/*",
      "npm:*": "jspm_packages/npm/*",
      "gmaps": "https://maps.googleapis.com/maps/api/js"
      //,  ...other paths...
    },

  meta: {
    "https://maps.googleapis.com/maps/api/*": {
      "build": false,
      "parameters": {
        "v": "3.exp",
        "libraries": "visualization,places,drawing,geometry",
        //, "client": "optional, your client id for google maps for work"
        //, "key":"optional, API key"
      },
      "loader": "gmap"
    }
    //,  ...other meta if you have ...
  }
});

Note: If npm is unresponsive due to a strange anomaly, you can use the github registry:

jspm install gmap=github:huasofoundries/googlemaps-loader

Usage

After installing and adding proper configs to your loader, use it like so:

define([
  'gmaps',
  'jquery'
], function (gmaps, jQuery) {

  jQuery('body').append('<div id="map"/>');
  
  var mapOptions = {
      zoom: 8,
      center: {
        lat: -34.397,
        lng: 150.644
      }
    },
    myMap = new gmaps.Map(document.getElementById('map'), mapOptions);

});

The global google object will still be accesible in the global namespace since that's how google exports its library.

googlemaps-loader's Issues

jspm buildStatic not working

I'm having trouble bundling a static jspm bundle with this library. It errors with this:
TypeError: Global SFX bundle dependency "https://maps.googleapis.com/maps/api/js" must be configured to an environment global via the globalDeps option.

I could add it as a global dependency but I actually want it loaded by SystemJS.

It seems very similar to this issue in a related library HeinrichFilter/systemjs-plugin-googlemaps#5

CORS error

Getting CORS error when using jspm / systemjs. Any ideas?

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access.