CODEWITHSUNDEEP
javascriptgoogle-mapsrequirejsamd
pixelboy
pixelboy

Reputation: 729

Require.js issue loading both Google Maps and it's Richmarker extension

I'm currently trying to load the Google Maps library and its extension, the RichMarker, using require.js modules definitions and dependency handlers.

I've declared the paths to both the Google Maps module and the extension like following:

"gmaps": "modules/google_maps",
"richmarker": "vendor/google/maps/richmarker.min"

The google_maps module looking like

define('gmaps', ['async!http://maps.googleapis.com/maps/api/js?key=mykey&sensor=true'],
function(){
  return window.google.maps;
});

And finally, the module made to consume the google maps Library and the advancedMarker extension defined as follows:

define(['common', 'gmaps','jquery','jqueryui',  'bootstrap',"vendor/google/maps/clusterer.min", "tmp/clusteringData", "richmarker"],
function(common, gmaps){

Yet, the googlemap properly inits onload, but I get errors regarding the richmarker extension in my console :

Uncaught ReferenceError: google is not defined richmarker.min.js:1
Uncaught ReferenceError: RichMarker is not defined google.init.js:267

Where am am I doing it wrong ? Thanks for the help.

Upvotes: 3

Views: 2993

Answers (2)

Artur Skarżycki
Artur Skarżycki

Reputation: 21

I had the same issue with infobox.js that strictly depends on Google Maps.

What I have done:

  1. I've defined module google (instead of gmaps) that returns the whole google object (instead of single maps property)

    define('google', ['async!http://maps.googleapis.com/maps/api/js?key=mykey&sensor=true'],
  function() {
    return window.google;
  });

  2. I've defined dependency between infobox and google in RequireJS config file:

    paths: {
  google: 'ref/google',
  infobox: 'ref/infobox'
},
shim: {
  infobox: {
    deps: ['google']
  }
}

Upvotes: 2

asgoth
asgoth

Reputation: 35829

I've answered the same question not long ago:

https://stackoverflow.com/a/13955963/1916258

I think you need to "shim" the google object.

require.config({
   baseUrl: 'js',
   paths: {
      gmaps: 'path/to/gmaps'
   },
   shim: {
      gmaps: {
         exports: 'google'
      }
   }
});

Upvotes: 0

Related Questions