├── README
├── test.html
└── unobtrusive-google-maps.jquery.js
/README:
--------------------------------------------------------------------------------
1 |
2 | --~~ Unobtrusive Google Maps ~~--
3 |
4 |
5 | Loads interactive Google maps when a static JPEG map
6 | is clicked. The static map is replaced with a div. The
7 | div is filled with a regular interactive Google map.
8 |
9 | Demo: http://f.augustl.com/2011/unobtrusive_google_maps/
10 |
11 |
12 |
13 | --~~ Usage ~~--
14 |
15 | Download the javascript: http://github.com/augustl/unobtrusive-google-maps/raw/master/unobtrusive-google-maps.jquery.js
16 |
17 | Include the javascript on your page.
18 |
19 | In your HTML (without the line break slashes):
20 |
21 | 
24 |
25 | In your javascripts:
26 |
27 | $(".static_map").unobtrusiveGoogleMaps();
28 |
29 |
30 | --~~ Why? ~~--
31 |
32 | You want your page to load fast. So you use static maps. You
33 | don't need dynamic and interactive maps until a user actually
34 | clicks the map, and loading the entire Google maps stack when
35 | your page loads makes your page slower. What if the user didn't
36 | want to click your Google map at all? He just spent all that
37 | time loading Google maps for nothing.
--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
7 | Unobtrusive Google Maps
8 |
11 |
12 |
13 | Because of the lack of an API key, this will probably only work on localhost.
14 |
15 | 
16 | 
17 |
18 |
19 |
20 |
25 |
26 |
--------------------------------------------------------------------------------
/unobtrusive-google-maps.jquery.js:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Copyright (c) 2009 August Lilleaas, http://august.lilleaas.net
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining
6 | a copy of this software and associated documentation files (the
7 | "Software"), to deal in the Software without restriction, including
8 | without limitation the rights to use, copy, modify, merge, publish,
9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23 |
24 |
25 | */
26 | (function($){
27 | // Handles the loading of the Google Maps scripts
28 | var GoogleMapsScripts = {
29 | whenLoaded: function(callback){
30 | if (this.isLoaded) {
31 | callback.call()
32 | } else {
33 | // Without the callback, we get a nasty document.write which we don't want. Pick
34 | // any global function. parseInt works.
35 | $.getScript("http://maps.google.com/maps/api/js?sensor=false&callback=parseInt");
36 | this.monitorScriptLoading(callback)
37 | }
38 | },
39 |
40 | // The reason that the google maps callback isn't used is that we want to persist our
41 | // own local callback from the UnobtrusiveGoogleMap instance.
42 | monitorScriptLoading: function(callback){
43 | if (window["google"] && window["google"]["maps"] && window["google"]["maps"]["LatLng"]) {
44 | this.isLoaded = true;
45 | callback();
46 | } else {
47 | setTimeout(function() { GoogleMapsScripts.monitorScriptLoading(callback) }, 100)
48 | }
49 | }
50 | }
51 |
52 | var UnobtrusiveGoogleMap = function(targetElement){
53 | var self = this;
54 |
55 | this.targetElement = $(targetElement);
56 | this.targetElement.mousedown(function(){
57 | self.loadInteractiveMap();
58 | return false;
59 | });
60 | }
61 |
62 | UnobtrusiveGoogleMap.prototype = {
63 | loadInteractiveMap: function(){
64 | var self = this;
65 |
66 | this.options = this.getOptionsFromQueryParameters();
67 | GoogleMapsScripts.whenLoaded(function(){
68 | self.loadMap();
69 | })
70 | },
71 |
72 | getOptionsFromQueryParameters: function(){
73 | var src = this.targetElement.attr("src");
74 | var options = {}
75 | var queryParameters = {};
76 | $.each(/\?(.+)/.exec(src)[1].split("&"), function(i, x) {
77 | var r = x.split("="); queryParameters[unescape(r[0])] = unescape(r[1]);
78 | });
79 |
80 | options.zoom = parseInt(queryParameters["zoom"]);
81 |
82 | var sizes = queryParameters["size"].split("x");
83 | options.width = parseInt(sizes[0]);
84 | options.height = parseInt(sizes[1]);
85 |
86 | var latLong = queryParameters["center"].split(",");
87 | options.latitude = parseFloat(latLong[0]);
88 | options.longitude = parseFloat(latLong[1]);
89 |
90 | return options;
91 | },
92 |
93 | loadMap: function(){
94 | var newTarget = $(document.createElement("div"));
95 | newTarget.css({width: this.options.width, height: this.options.height});
96 | this.targetElement.replaceWith(newTarget)
97 |
98 | var point = new google.maps.LatLng(this.options.latitude, this.options.longitude);
99 | var map = new google.maps.Map(newTarget[0], {
100 | zoom: this.options.zoom, center: point,
101 | mapTypeId: google.maps.MapTypeId.ROADMAP
102 | });
103 | new google.maps.Marker({position: point, map: map });
104 | },
105 | }
106 |
107 | // Hooks the click event that loads a interactive map. The element(s)
108 | // you are refering to has to be the actual ![]()
tags.
109 | //
110 | // $("img.google_map").unobtrusiveGoogleMap();
111 | $.fn.unobtrusiveGoogleMaps = function(){
112 | this.each(function(i, element) { new UnobtrusiveGoogleMap(element) });
113 | }
114 | })(jQuery);
--------------------------------------------------------------------------------