Lightbox google map

Question

Lightbox google map

I have a google custom map that I put points on and an HTML popup is displayed when you click on this image.

I created a file with java script functions. Now I want, when the user clicks on the image, this file opens inside a bright window / fancybox.

My HTML page where the image is located. (Source)

<li class="loaction1">


                        <span class="loactionImg">
                             <a  href="" target=""><img src="<?php bloginfo('template_url'); ?>/images/location.jpg" alt=""></a>
                        </span>
                        <span class="addressdet">
                            <span>Address:</span><br/>
                             Ball Road<br/>
                            Anaheim<br/>
                        </span>
                        <span class="storTimings">
                            <span>Timings:</span><br/>
                            Mon-Sat 6am - 6pm<br/>
                            Closed Sunday<br/>
                            <a href="#">(map and directions)</a>
                        </span>
                    </li>

My Custome code to display Google map

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAgrj58PbXr2YriiRDqbnL1RSqrCjdkglBijPNIIYrqkVvD1R4QxRl47Yh2D_0C1l5KXQJGrbkSDvXFA"
      type="text/javascript"></script>
    <script type="text/javascript">

 function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        var center = new GLatLng(33.86456,-117.99803);
        map.setCenter(center, 15);
        geocoder = new GClientGeocoder();
        var marker = new GMarker(center, {draggable: true});
        map.addOverlay(marker);
        document.getElementById("lat").innerHTML = center.lat().toFixed(5);
        document.getElementById("lng").innerHTML = center.lng().toFixed(5);

      GEvent.addListener(marker, "dragend", function() {
       var point = marker.getPoint();
          map.panTo(point);
       document.getElementById("lat").innerHTML = point.lat().toFixed(5);
       document.getElementById("lng").innerHTML = point.lng().toFixed(5);

        });


     GEvent.addListener(map, "moveend", function() {
          map.clearOverlays();
    var center = map.getCenter();
          var marker = new GMarker(center, {draggable: true});
          map.addOverlay(marker);
          document.getElementById("lat").innerHTML = center.lat().toFixed(5);
       document.getElementById("lng").innerHTML = center.lng().toFixed(5);


     GEvent.addListener(marker, "dragend", function() {
      var point =marker.getPoint();
         map.panTo(point);
      document.getElementById("lat").innerHTML = point.lat().toFixed(5);
         document.getElementById("lng").innerHTML = point.lng().toFixed(5);

        });

        });

      }
    }

       function showAddress(address) {
       var map = new GMap2(document.getElementById("map"));
       map.addControl(new GSmallMapControl());
       map.addControl(new GMapTypeControl());
       if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
          document.getElementById("lat").innerHTML = point.lat().toFixed(5);
       document.getElementById("lng").innerHTML = point.lng().toFixed(5);
         map.clearOverlays()
            map.setCenter(point, 14);
   var marker = new GMarker(point, {draggable: true});
         map.addOverlay(marker);

        GEvent.addListener(marker, "dragend", function() {
      var pt = marker.getPoint();
         map.panTo(pt);
      document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
         document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
        });


     GEvent.addListener(map, "moveend", function() {
          map.clearOverlays();
    var center = map.getCenter();
          var marker = new GMarker(center, {draggable: true});
          map.addOverlay(marker);
          document.getElementById("lat").innerHTML = center.lat().toFixed(5);
       document.getElementById("lng").innerHTML = center.lng().toFixed(5);

     GEvent.addListener(marker, "dragend", function() {
     var pt = marker.getPoint();
        map.panTo(pt);
    document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
       document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
        });

        });

            }
          }
        );
      }
    }
    </script>
  </head>


<body onload="load()" onunload="GUnload()" >


  <p>
      <div align="center" id="map" style="width: 600px; height: 400px"><br/></div>
   </p>
  </body>

</html>

Can someone help me integrate this. Thank.

+3

javascript jquery html google-maps lightbox

Soarabh Feb 22 '11 at 10:06

source share

1 answer

Frode · Answer 1 · 2011-02-22T23:32:28+0000

Here is one way to do this (using fancybox).

First (of course) enable the fancybox and jQuery libraries if you haven't already.

<link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.fancybox-1.3.4.pack.js"></script>

-, li (, , , ). - href, , - data, .

<li class="loaction1">
    <span class="loactionImg">
        <a href="#map" data-yourwebsite-address="Ball Road, Anaheim">
            <img src="<?php bloginfo('template_url'); ?>/images/location.jpg" alt="">
        </a>
    </span>
    <!--... the rest of your content ...-->
</li>

<li class="loaction2">
    <span class="loactionImg">
        <a href="#map" data-yourwebsite-address="112 Beacon Street, Boston">
   ... and so on ...

, , fancybox. , , p 0. , display: none , 0.

<p style="height: 0px; overflow: hidden;">
    <div align="center" id="map" style="width: 600px; height: 400px"><br/></div>
</p>

, fancybox. , fancybox . fancybox , showAddress , , link data.

$(document).ready(function() 
{
    $(".loactionImg a").fancybox({
        onStart: function(evt) { showAddress($(evt).data("yourwebsite-address")); }
    });
});

! :-) , (slighly messy), ,

Lightbox google map

More articles: