CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-mapslightbox
Soarabh
Soarabh

Reputation: 2950

Google Map Inside a Lightbox

I have a custom google map that I put points on and an HTML popup window shows when you click on that image.

I had created a file with java script functions, Now i want when a user click on a image that file opens inside light box/fancybox.

My HTML Page where image is located.(Source Code)

<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 for Displaying google Map Is

<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 some one help me to integrate this. Thanks.

Upvotes: 3

Views: 2122

Answers (1)

Frode
Frode

Reputation: 5710

Here's one way you can do it (using fancybox).

First (of course) include 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>

Second, we add two things to the image link in your li (which I assume you have several of, with different addresses). The first is the href attribute, which will point to the map, and the second is a data attribute which will hold the actual address.

<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 ...

Next up, we hide the map initially, so that it's not shown until we fire up our fancybox. We do this for example by setting the height of the p to 0. Note that using display: none will cause some issues with the map, so use height 0.

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

Lastly, do the actual fancybox code. When the page is loaded, we add fancybox to all the image links. In the fancybox constructor, we tell it to call showAddress every time it starts, using the address from the link's data attribute.

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

And voilà! That should do it :-) If it doesn't work, here's my entire code (slighly messy) that I used to try it out

Upvotes: 2

Related Questions