From: Iain Patterson <me@iain.cx>
Date: Thu, 7 Nov 2013 16:32:50 +0000 (-0500)
Subject: Use popup div for Google Maps.
X-Git-Tag: 2013-11-07^0
X-Git-Url: http://git.iain.cx/?p=readifood.git;a=commitdiff_plain;h=e2ec797398326b88782988d0b9719e21c278a584;ds=sidebyside

Use popup div for Google Maps.

Show an embedded Google Maps view in the popup div.  It is displayed
when hovering over the Map link for a preview of the map.  Following the
link will go to the full map on maps.google.co.uk as before.

We make sure to include the output=embedded argument and specify https
so that browsers don't refuse to load the preview on security grounds.
---

diff --git a/lib/functions.php b/lib/functions.php
index f1e7145..ec0b35a 100644
--- a/lib/functions.php
+++ b/lib/functions.php
@@ -320,7 +320,32 @@
   function get_address_map_link($address) {
     $postcode = trim($address->getPostcode());
     if ($postcode) {
-      return " " . get_small_link("Map", "http://maps.google.co.uk/maps?q=" . urlencode($postcode));
+      # mrt=loc specifies a location search.
+      $map = "maps.google.co.uk/maps?q=" . urlencode($postcode) . "&mrt=loc";
+      $url = "http://$map";
+      # output=embed allows display in an iframe.
+      # iwloc=near hides the popup window for the embedded view.
+      $embed = $GLOBALS['http'] . "://$map&output=embed&iwloc=near";
+      $html = " ";
+      $html .= get_small_link_with_id("map", "Map", $url);
+      $html .= "<script>\n  $(function() {\n";
+      $html .= "    var x = 0;\n";
+      $html .= "    var y = 0;\n";
+      $html .= "    var loaded = false;\n";
+      $html .= "    $(\"#map\").hover(function(e) {\n";
+      $html .= "      x = $(this).outerWidth();\n";
+      $html .= "      y = $(this).outerHeight() / 2;\n";
+      $html .= "      $(\"#popup\").css(\"left\", e.pageX + x).css(\"top\", e.pageY + y);;\n";
+      $html .= "      $(\"#popup\").show();\n";
+      $html .= "      if (! loaded) {\n";
+      $html .= "        $(\"#popup\").html(\"<iframe width='100%' height='100%' src='$embed'></iframe>\");\n";
+      $html .= "        loaded = true;\n";
+      $html .= "      }\n";
+      $html .= "    },function() {\n";
+      $html .= "      $(\"#popup\").hide();\n";
+      $html .= "    })\n";
+      $html .= "  });</script>";
+      return $html;
     }
   }