Ako prinútiť pracovať Google Maps s RequireJS

DOWNLOAD

Ako použiť Google Maps API vo webovej aplikácii? No treba si pridať do stránky referenciu na samotné API.

Google Maps v3 API, však načítava ďalšie javascript-ové súbory, a preto nestačí čakať na dotiahnutie prvého js súboru, ale na dotiahnutie "celého" API (mohlo by sa stať, že sa poukúsime použiť API ešte pred tým ako je celé inicializované). To, že to takto funguje, má svoj zmysel a dá sa z toho, takpovediac "vykľučkovať". Pri načítaní API môžeme špecifikovať callback parameter, ktorý ak na načítanie použijeme RequireJS (alebo iný AMD loader ako napr. dojo) a async plugin, callback sa vykoná až potom, čo je celé API načítané a spracované.

Prejdime, ku konkrétnej ukážke:

  • WebApp
    • Libs
      • Google
        • Maps.js
      • Plugins
        • async.js
    • index.html
    • app.js
    • config.js
Štruktúra projektu

Demo projekt obsahuje niekoľko súborov. index.html je hlavný súbor aplikácie, a obsahuje rozloženie stránky a referenciu na AMD loader, v tomto prípade dojo.

<!DOCTYPE html>
<html lang="en">
<head>
    
<title>Google Maps Demo</title>
    
<style type="text/css">
        
#map {
            width
: 640px;
            height
: 480px;
        
}
    </
style>
</head>
    
<body>
        
<!-- Body -->
        
<div id="map"></div>
        
        
<!-- Scripts -->
        
<script data-dojo-config="async: true, deps:['config.js']" 
                src
="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js">
        
</script>
    
</body>
</html>
Obsah súboru index.html

Konfiguračný súbor aplikácie config.js (automaticky načítaný prostredníctvom nastavenia "deps", viď. index.html), definuje cestu k spomínanému async pluginu, ku adresáru Libs, ktorý obsahuje ďalšie javascriptové knižnice a cestu k aplikačnému modulu app.js, ktorý je automaticky načítaný po spracovaní konfigurácie.

(function(baseUrl) {
    baseUrl.endsWith(
"/") && (baseUrl baseUrl.replace(/\/+$/g, ""));
    
    
require({
        paths: {
            
"app": baseUrl + "/app",
            
"Libs": baseUrl + "/Libs",
            
"async": baseUrl + "/Libs/Plugins/async"
        
}
    }, [
"app"]);
})(location.pathname.replace(/\/[^/]+$/, ""));
Obsah súboru config.js

Ak by sme chceli Google Maps používať vo viacerých moduloch, bolo by trochu ťažkopádne neustále písať odkaz na API v tvare url adresy async!http://maps.google.com/maps/api/js?v=3&sensor=false. Problematický by bol aj prechod na novšiu verziu, respektíve inú verziu, kde by sme museli prejsť každý modul a prepísať odkaz na API na viacerých miestach, čo by mohlo viesť k chybe. Preto si v súbore Maps.js zadefinujeme nový modul, ktorý pomocou async pluginu dotiahne Google Maps API, a vráti naň odkaz:

define([
    
"async!http://maps.google.com/maps/api/js?v=3&sensor=false"
],
function(){
    
return window.google.maps;
});
Modul Google Maps

V aplikačnom module, pridáme require volanie na náš modul zapuzdrujúci Google Maps API, vytvoríme Map objekt na mieste div elementu s id map, mapu vycentrujeme na súradnice 48.1458, 17.1071 (Bratislava) s podkladovou mapou ROADMAP:

define([
    
"dojo/dom",
    
"Libs/Google/Maps",
    
"dojo/domReady!"
], function (dom, GoogleMaps) {
    
var map = new GoogleMaps.Map(dom.byId("map"),{
        zoom:
13,
        center: 
new GoogleMaps.LatLng(48.145817.1071),
        mapTypeId: GoogleMaps.MapTypeId.ROADMAP
    })
;
});
Aplikačný modul

Takto môžeme Google Maps API načítať a použiť naozaj len vtedy keď to bude potrebné a len v tom module v ktorom to bude potrebné.

Publikované Saturday, January 17, 2015 2:32 PM xxxmatko

Komentáre

Bez komentárov