From 607d8d855bb02823506645a216a466f60a03877c Mon Sep 17 00:00:00 2001 From: mikeschutz Date: Thu, 20 Mar 2014 13:24:49 -0400 Subject: [PATCH 1/2] Fixed and improved asynchronous loading 1. Added $loadAsynchDelay config variable to help prevent issue where maps initialize before its elements finish loading. 2. Moved google.maps.InfoWindow constructor inside loadScript function, so it doesn't error out on asynchronous pages. 3. Added code (line 2117) to prevent Google Maps API from loading multiple times on subsequent AJAX calls. 4. Minor fix on line 2127 to kick off loadScript function on AJAX calls. --- application/libraries/Googlemaps.php | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/application/libraries/Googlemaps.php b/application/libraries/Googlemaps.php index 4eb2351..70183f6 100644 --- a/application/libraries/Googlemaps.php +++ b/application/libraries/Googlemaps.php @@ -50,6 +50,7 @@ class Googlemaps { var $kmlLayerPreserveViewport = FALSE; // Specifies whether the map should be adjusted to the bounds of the KmlLayer's contents. By default the map is zoomed and positioned to show the entirety of the layer's contents var $language = ''; // The map will by default load in the language of the browser. This can be overriden however here. For a full list of codes see https://spreadsheets.google.com/pub?key=p9pdwsai2hDMsLkXsoM05KQ&gid=1 var $loadAsynchronously = FALSE; // Load the map and API asynchronously once the page has loaded + var $loadAsynchDelay = 1000; // Number of milliseconds to delay initializing asynchronously-loaded maps, to avoid problems initializing before ready var $map_div_id = "map_canvas"; // The ID of the
that is output which contains the map var $map_height = "450px"; // The height of the map container. Any units (ie 'px') can be used. If no units are provided 'px' will be presumed var $map_name = "map"; // The JS reference to the map. Currently not used but to be used in the future when multiple maps are supported @@ -1189,6 +1190,10 @@ function create_map() '; } + $this->output_js_contents .= 'function initialize_'.$this->map_name.'() { + + '; + $this->output_js_contents .= ' var iw_'.$this->map_name.' = new google.maps.InfoWindow('; if ($this->infowindowMaxWidth != 0) @@ -1201,10 +1206,6 @@ function create_map() '; - $this->output_js_contents .= 'function initialize_'.$this->map_name.'() { - - '; - $styleOutput = ''; if (count($this->styles)) { $styles = 0; @@ -2113,12 +2114,17 @@ function fitMapToBounds_'.$this->map_name.'() { if ($this->loadAsynchronously) { $this->output_js_contents .= ' function loadScript_'.$this->map_name.'() { - var script = document.createElement("script"); - script.type = "text/javascript"; - script.src = "'.$apiLocation.'&callback=initialize_'.$this->map_name.'"; - document.body.appendChild(script); + if (typeof google === "object" && typeof google.maps === "object") { + setTimeout(initialize_'.$this->map_name.', '.$this->loadAsynchDelay.'); + return; + } else { + var script = document.createElement("script"); + script.type = "text/javascript"; + script.src = "'.$apiLocation.'&callback=initialize_'.$this->map_name.'"; + document.body.appendChild(script); + } } - window.onload = loadScript_'.$this->map_name.'; + window.onload = loadScript_'.$this->map_name.'(); '; }else{ $this->output_js_contents .= ' @@ -2258,4 +2264,4 @@ function get_lat_long_from_address($address, $attempts = 0) } -?> \ No newline at end of file +?> From 73f61315f1a09e3c28530027fba75ad3349de96f Mon Sep 17 00:00:00 2001 From: mikeschutz Date: Thu, 20 Mar 2014 17:01:40 -0400 Subject: [PATCH 2/2] Fixed hardcoded map name Replaced hardcoded map name with config variable so listeners work. --- application/libraries/Googlemaps.php | 31 ++++++++++++++-------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/application/libraries/Googlemaps.php b/application/libraries/Googlemaps.php index 70183f6..3e91dbd 100644 --- a/application/libraries/Googlemaps.php +++ b/application/libraries/Googlemaps.php @@ -1205,6 +1205,7 @@ function create_map() $this->output_js_contents .= '); '; + $styleOutput = ''; if (count($this->styles)) { @@ -1746,91 +1747,91 @@ function create_map() } if ($this->onboundschanged!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "bounds_changed", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "bounds_changed", function(event) { '.$this->onboundschanged.' }); '; } if ($this->oncenterchanged!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "center_changed", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "center_changed", function(event) { '.$this->oncenterchanged.' }); '; } if ($this->onclick!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "click", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "click", function(event) { '.$this->onclick.' }); '; } if ($this->ondblclick!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "dblclick", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "dblclick", function(event) { '.$this->ondblclick.' }); '; } if ($this->ondrag!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "drag", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "drag", function(event) { '.$this->ondrag.' }); '; } if ($this->ondragend!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "dragend", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "dragend", function(event) { '.$this->ondragend.' }); '; } if ($this->ondragstart!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "dragstart", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "dragstart", function(event) { '.$this->ondragstart.' }); '; } if ($this->onidle!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "idle", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "idle", function(event) { '.$this->onidle.' }); '; } if ($this->onmousemove!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "mousemove", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "mousemove", function(event) { '.$this->onmousemove.' }); '; } if ($this->onmouseout!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "mouseout", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "mouseout", function(event) { '.$this->onmouseout.' }); '; } if ($this->onmouseover!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "mouseover", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "mouseover", function(event) { '.$this->onmouseover.' }); '; } if ($this->onresize!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "resize", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "resize", function(event) { '.$this->onresize.' }); '; } if ($this->onrightclick!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "rightclick", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "rightclick", function(event) { '.$this->onrightclick.' }); '; } if ($this->ontilesloaded!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "tilesloaded", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "tilesloaded", function(event) { '.$this->ontilesloaded.' }); '; } if ($this->onzoomchanged!="") { - $this->output_js_contents .= 'google.maps.event.addListener(map, "zoom_changed", function(event) { + $this->output_js_contents .= 'google.maps.event.addListener('.$this->map_name.', "zoom_changed", function(event) { '.$this->onzoomchanged.' }); ';