Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jun 30th, 2012  |  syntax: None  |  size: 5.30 KB  |  hits: 14  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Google Map Inside a Lightbox
  2. <li class="loaction1">
  3.  
  4.  
  5.                         <span class="loactionImg">
  6.                              <a  href="" target=""><img src="<?php bloginfo('template_url'); ?>/images/location.jpg" alt=""></a>
  7.                         </span>
  8.                         <span class="addressdet">
  9.                             <span>Address:</span><br/>
  10.                              Ball Road<br/>
  11.                             Anaheim<br/>
  12.                         </span>
  13.                         <span class="storTimings">
  14.                             <span>Timings:</span><br/>
  15.                             Mon-Sat 6am - 6pm<br/>
  16.                             Closed Sunday<br/>
  17.                             <a href="#">(map and directions)</a>
  18.                         </span>
  19.                     </li>
  20.        
  21. <html xmlns="http://www.w3.org/1999/xhtml">
  22.   <head>
  23.     <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAgrj58PbXr2YriiRDqbnL1RSqrCjdkglBijPNIIYrqkVvD1R4QxRl47Yh2D_0C1l5KXQJGrbkSDvXFA"
  24.       type="text/javascript"></script>
  25.     <script type="text/javascript">
  26.  
  27.  function load() {
  28.       if (GBrowserIsCompatible()) {
  29.         var map = new GMap2(document.getElementById("map"));
  30.         map.addControl(new GSmallMapControl());
  31.         map.addControl(new GMapTypeControl());
  32.         var center = new GLatLng(33.86456,-117.99803);
  33.         map.setCenter(center, 15);
  34.         geocoder = new GClientGeocoder();
  35.         var marker = new GMarker(center, {draggable: true});
  36.         map.addOverlay(marker);
  37.         document.getElementById("lat").innerHTML = center.lat().toFixed(5);
  38.         document.getElementById("lng").innerHTML = center.lng().toFixed(5);
  39.  
  40.       GEvent.addListener(marker, "dragend", function() {
  41.        var point = marker.getPoint();
  42.           map.panTo(point);
  43.        document.getElementById("lat").innerHTML = point.lat().toFixed(5);
  44.        document.getElementById("lng").innerHTML = point.lng().toFixed(5);
  45.  
  46.         });
  47.  
  48.  
  49.      GEvent.addListener(map, "moveend", function() {
  50.           map.clearOverlays();
  51.     var center = map.getCenter();
  52.           var marker = new GMarker(center, {draggable: true});
  53.           map.addOverlay(marker);
  54.           document.getElementById("lat").innerHTML = center.lat().toFixed(5);
  55.        document.getElementById("lng").innerHTML = center.lng().toFixed(5);
  56.  
  57.  
  58.      GEvent.addListener(marker, "dragend", function() {
  59.       var point =marker.getPoint();
  60.          map.panTo(point);
  61.       document.getElementById("lat").innerHTML = point.lat().toFixed(5);
  62.          document.getElementById("lng").innerHTML = point.lng().toFixed(5);
  63.  
  64.         });
  65.  
  66.         });
  67.  
  68.       }
  69.     }
  70.  
  71.        function showAddress(address) {
  72.        var map = new GMap2(document.getElementById("map"));
  73.        map.addControl(new GSmallMapControl());
  74.        map.addControl(new GMapTypeControl());
  75.        if (geocoder) {
  76.         geocoder.getLatLng(
  77.           address,
  78.           function(point) {
  79.             if (!point) {
  80.               alert(address + " not found");
  81.             } else {
  82.           document.getElementById("lat").innerHTML = point.lat().toFixed(5);
  83.        document.getElementById("lng").innerHTML = point.lng().toFixed(5);
  84.          map.clearOverlays()
  85.             map.setCenter(point, 14);
  86.    var marker = new GMarker(point, {draggable: true});
  87.          map.addOverlay(marker);
  88.  
  89.         GEvent.addListener(marker, "dragend", function() {
  90.       var pt = marker.getPoint();
  91.          map.panTo(pt);
  92.       document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
  93.          document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
  94.         });
  95.  
  96.  
  97.      GEvent.addListener(map, "moveend", function() {
  98.           map.clearOverlays();
  99.     var center = map.getCenter();
  100.           var marker = new GMarker(center, {draggable: true});
  101.           map.addOverlay(marker);
  102.           document.getElementById("lat").innerHTML = center.lat().toFixed(5);
  103.        document.getElementById("lng").innerHTML = center.lng().toFixed(5);
  104.  
  105.      GEvent.addListener(marker, "dragend", function() {
  106.      var pt = marker.getPoint();
  107.         map.panTo(pt);
  108.     document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
  109.        document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
  110.         });
  111.  
  112.         });
  113.  
  114.             }
  115.           }
  116.         );
  117.       }
  118.     }
  119.     </script>
  120.   </head>
  121.  
  122.  
  123. <body onload="load()" onunload="GUnload()" >
  124.  
  125.  
  126.   <p>
  127.       <div align="center" id="map" style="width: 600px; height: 400px"><br/></div>
  128.    </p>
  129.   </body>
  130.  
  131. </html>
  132.        
  133. <link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4.css" />
  134. <script src="jquery-1.4.3.min.js"></script>
  135. <script src="jquery.fancybox-1.3.4.pack.js"></script>
  136.        
  137. <li class="loaction1">
  138.     <span class="loactionImg">
  139.         <a href="#map" data-yourwebsite-address="Ball Road, Anaheim">
  140.             <img src="<?php bloginfo('template_url'); ?>/images/location.jpg" alt="">
  141.         </a>
  142.     </span>
  143.     <!--... the rest of your content ...-->
  144. </li>
  145.  
  146. <li class="loaction2">
  147.     <span class="loactionImg">
  148.         <a href="#map" data-yourwebsite-address="112 Beacon Street, Boston">
  149.    ... and so on ...
  150.        
  151. <p style="height: 0px; overflow: hidden;">
  152.     <div align="center" id="map" style="width: 600px; height: 400px"><br/></div>
  153. </p>
  154.        
  155. $(document).ready(function()
  156. {
  157.     $(".loactionImg a").fancybox({
  158.         onStart: function(evt) { showAddress($(evt).data("yourwebsite-address")); }
  159.     });
  160. });
create a new version of this paste RAW Paste Data