{"id":984,"date":"2014-04-11T14:10:59","date_gmt":"2014-04-11T12:10:59","guid":{"rendered":"http:\/\/www.speich.net\/articles\/?p=984"},"modified":"2019-10-06T11:57:57","modified_gmt":"2019-10-06T09:57:57","slug":"how-to-load-google-maps-with-dojo-and-amd","status":"publish","type":"post","link":"https:\/\/www.speich.net\/articles\/en\/2014\/04\/11\/how-to-load-google-maps-with-dojo-and-amd\/","title":{"rendered":"How to use Google Maps API with Dojo and AMD"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If you are using AMD or RequireJS for your JavaScripts and you would also like to use the <a title=\"Google Maps JavaScript API\" href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Maps JavaScript API<\/a> you have a problem. You can&#8217;t just require in the script file and then access the google.maps object from within your script, e.g.:<\/p>\n\n\n\n<pre><code class=\"language-javascript\">require(['http:\/\/maps.googleapis.com\/maps\/api\/js?client=YOUR_CLIENT_ID'], function() {\n    var myMap = new google.maps.Map(mapDiv, mapOptions);\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This doesn&#8217;t work because the map script itself loads another script, which might not have been loaded yet, when you access the google.maps.Map object.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But fortunately, there is a <a title=\"Dojo AMD Google Maps Loader Plugin\" href=\"https:\/\/gist.github.com\/ca0v\/7450696\" target=\"_blank\" rel=\"noopener noreferrer\">neat loader module by Corey Alix<\/a>, which solves the problem:<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre><code class=\"language-javascript\">\/**\n * Dojo AMD Google Maps Loader Plugin\n * @see https:\/\/gist.github.com\/ca0v\/7450696\n *\/\ndefine([ 'dojo\/_base\/kernel'], function(kernel) {\n    'use strict';\n\n    var w = kernel.global,\n        cb = '_googleApiLoadCallback';\n\n    return {\n        load: function(param, req, loadCallback) {\n            if (!cb) {\n                return;\n            }\n            w[cb] = function() {\n                delete w[cb];\n                cb = null;\n                loadCallback();\n            };\n            require([param + \"&amp;callback=\" + cb]);\n        }\n    };\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">All you have to do is save the above code as a js file, let&#8217;s say gmapLoader.js, and then use it in your dojo code like:<\/p>\n\n\n\n<pre><code class=\"language-javascript\">&lt;script type=\"text\/javascript\" src=\"dojo\/1.9.3\/dojo\/dojo.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\"&gt;\nrequire([&nbsp;&nbsp; &nbsp;\n&nbsp;&nbsp; &nbsp;'yourPath\/gmapLoader!http:\/\/maps.google.com\/maps\/api\/js?v=3&amp;sensor=false&amp;language=' + dojoConfig.locale,\n&nbsp;&nbsp; &nbsp;'dojo\/domReady!'\n], function() {\n&nbsp;&nbsp; &nbsp;\/\/ access the Maps object\n&nbsp;&nbsp; &nbsp;var myMap = new google.maps.Map(mapDiv, mapOptions);\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Note: You can use this module not only with the Google Maps JavaScript API, but with any other JavaScript file that loads another script asynchronously. You just have to set the callback variable cb = &#8216;_googleApiLoadCallback&#8217;; to the correct callback function name.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to see the Loader Module in action, check out my <a title=\"Photodatabase Mapsearch\" href=\"..\/photo\/photodb\/photo-mapsearch.php\">photo map search with clustering<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are using AMD or RequireJS for your JavaScripts and you would also like to use the Google Maps JavaScript API you have a problem. You can&#8217;t just require in the script file and then access the google.maps object from within your script, e.g.: require([&#8216;http:\/\/maps.googleapis.com\/maps\/api\/js?client=YOUR_CLIENT_ID&#8217;], function() { var myMap = new google.maps.Map(mapDiv, mapOptions); } &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.speich.net\/articles\/en\/2014\/04\/11\/how-to-load-google-maps-with-dojo-and-amd\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;How to use Google Maps API with Dojo and AMD&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[9,26,38],"class_list":["post-984","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-amd","tag-dojo","tag-google-maps","entry"],"_links":{"self":[{"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/posts\/984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/comments?post=984"}],"version-history":[{"count":2,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/posts\/984\/revisions"}],"predecessor-version":[{"id":1674,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/posts\/984\/revisions\/1674"}],"wp:attachment":[{"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/media?parent=984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/categories?post=984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/tags?post=984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}