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 (file)
--- 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;
     }
   }