Created
March 27, 2011 22:05
-
-
Save Takazudo/889677 to your computer and use it in GitHub Desktop.
is a google maps async loader like jQuery.fn.ready.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en" class="no-js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>$.gmapV3</title> | |
| <meta name="description" content=""> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> | |
| <script src="jquery.gmapv3.js"></script> | |
| <style> | |
| #map1{ | |
| width:500px; | |
| height:500px; | |
| } | |
| </style> | |
| <script> | |
| /** | |
| * test functions | |
| */ | |
| function putMap(){ | |
| var opts = { | |
| center: new google.maps.LatLng(35.691251, 139.701072), | |
| zoom: 17, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP | |
| }; | |
| var map = new google.maps.Map($('#map1')[0], opts); | |
| } | |
| function test1(){ | |
| $('#test1').html('test1'); | |
| } | |
| function test2(){ | |
| $('#test2').html('test2'); | |
| } | |
| function test3(){ | |
| $('#test3').html('test3'); | |
| } | |
| function test4(){ | |
| $('#test4').html('test4'); | |
| } | |
| /** | |
| * usage | |
| */ | |
| // define options | |
| $.gmapV3.options({ language: 'ja' }); | |
| // fire load | |
| //$.gmapV3.load(); | |
| //$.gmapV3.load(); // no more load will trigger | |
| // imagine jQuery.fn.ready | |
| $.gmapV3.ready(putMap); | |
| $.gmapV3.ready(function(){ | |
| test1(); | |
| test2(); | |
| }); | |
| $.gmapV3.ready(test3); | |
| $.gmapV3.ready(test4); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>$.gmapV3 - a google maps api v3 async loader</h1> | |
| <p><button onclick="$.gmapV3.load();">$.gmapV3.load();</button></p> | |
| <pre>// fire load | |
| $.gmapV3.load(); | |
| // imagine jQuery.fn.ready | |
| $.gmapV3.ready(putMap); | |
| $.gmapV3.ready(function(){ | |
| test1(); | |
| test2(); | |
| }); | |
| $.gmapV3.ready(test3); | |
| $.gmapV3.ready(test4);</pre> | |
| <div id="map1"></div> | |
| <div id="test1"></div> | |
| <div id="test2"></div> | |
| <div id="test3"></div> | |
| <div id="test4"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! | |
| * $.gmapV3 | |
| * https://gist.github.com/889677 | |
| * is a google maps async loader | |
| * author: Takeshi Takatsudo (takazudo[at]gmail.com) | |
| * upate: 2011/03/28 | |
| * version: 1 | |
| */ | |
| (function($, window, document, undefined){ | |
| $.gmapV3 = (function(){ | |
| /* instance */ | |
| var gmapV3 = {}; | |
| var _loadFired = false; | |
| var _readyList = []; | |
| var _mapReady = false; | |
| /* default options */ | |
| var _options = { | |
| language: 'en', | |
| sensor: false, | |
| callbackFnName: 'gMapCallback' | |
| }; | |
| /* private */ | |
| function _load(){ | |
| var data = { | |
| language: _options.language, | |
| sensor: _options.sensor, | |
| callback: _options.callbackFnName | |
| }; | |
| window[_options.callbackFnName] = _onload || $.noop; | |
| /* | |
| Google maps tries to appendChild to document.body. | |
| So if you call this in 'head', sometimes it fails. | |
| This timer avoids it. | |
| */ | |
| var timer = setInterval(function(){ | |
| if(document.body){ | |
| $.ajax({ | |
| url: 'http://maps.google.com/maps/api/js', | |
| dataType: 'script', | |
| data: data, | |
| cache: true | |
| }); | |
| clearInterval(timer); | |
| } | |
| },10); | |
| } | |
| function _onload(){ | |
| $(function(){ | |
| _mapReady = true; | |
| $.each(_readyList, function(i, fn){ | |
| fn(); | |
| }); | |
| }); | |
| } | |
| /* public */ | |
| gmapV3.options = function(o){ | |
| $.extend(_options, o); | |
| return gmapV3; | |
| }; | |
| gmapV3.ready = function(fn){ | |
| if(_mapReady){ | |
| fn(); | |
| }else{ | |
| _readyList.push(fn); | |
| } | |
| return gmapV3; | |
| }; | |
| gmapV3.load = function(){ | |
| if(_loadFired){ | |
| return; | |
| } | |
| _loadFired = true; | |
| _load(); | |
| return gmapV3; | |
| }; | |
| return gmapV3; | |
| })(); // end of $.gmapV3 | |
| })(jQuery, this, this.document); // end of encapsulation |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment