• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 569
  • Last Modified:

Launching a lightbox from google maps info box

Hi
I want to launch a lightbox if a user wants to view additional information that isn't made available on my map.

The code I have for the map is:
infowindow.setContent(venues[i][0] + '<br/><a href="javascript:calcRoute(' + i + ')">How do I get there?</a><br>View on <a href="http://maps.google.com/maps?q=' + venues[i][1] + ',' + venues[i][2] + '">Google Maps</a>');
                        

Open in new window


and my simple working lightbox code is:
<html>
	<head>
		<title>Quick Simple Light Box</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
		<style type="text/css">
 
		body
		{
			font-family: Helvetica, Arial;
		}
 
		.backdrop
		{
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			height:100%;
			background:#000;
			opacity: .0;
			filter:alpha(opacity=0);
			z-index:50;
			display:none;
		}
 
 
		.box
		{
			position:absolute;
			top:20%;
			left:30%;
			width:500px;
			height:300px;
			background:#ffffff;
			z-index:51;
			padding:10px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			-moz-box-shadow:0px 0px 5px #444444;
			-webkit-box-shadow:0px 0px 5px #444444;
			box-shadow:0px 0px 5px #444444;
			display:none;
		}
 
		.close
		{
			float:right;
			margin-right:6px;
			cursor:pointer;
		}
 
		</style>
 
		<script type="text/javascript">
 
			$(document).ready(function(){
 
				$('.lightbox').click(function(){
					$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
					$('.box').animate({'opacity':'1.00'}, 300, 'linear');
					$('.backdrop, .box').css('display', 'block');
				});
 
				$('.close').click(function(){
					close_box();
				});
 
				$('.backdrop').click(function(){
					close_box();
				});
 
			});
 
			function close_box()
			{
				$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
					$('.backdrop, .box').css('display', 'none');
				});
			}
 
		</script>
 
	</head>
	<body>
 
	<h1>This is my webpage...</h1>
	<a href="#" class="lightbox">Open Lightbox</a>
 
	<div class="backdrop"></div>
	<div class="box"><div class="close">x</div>This is the lightbox!!!</div>
 
	</body>
</html>

Open in new window


However when I try to bring the two together:
infowindow.setContent(venues[i][0] + '<br/><a href="javascript:calcRoute(' + i + ')">How do I get there?</a><br>View on <a href="http://maps.google.com/maps?q=' + venues[i][1] + ',' + venues[i][2] + '">Google Maps</a><br><a href="#" class="lightbox">Open Lightbox</a>');
                        

Open in new window


I just get taken to the top of the page - any ideas where I have gone wrong?
thanks
0
lz7cjc
Asked:
lz7cjc
  • 5
  • 2
  • 2
1 Solution
 
COBOLdinosaurCommented:
I woudl suspect that the event is not bubbling up because everything is contained by infowindow.setContent Which from the context appears to be part of inline generation, which frequently screws up the Document Object. Plus the generation container already contains a event that calls a function so the lightbox event is getting lost in there somewhere.

You might have to explicitly call the lightbox function with an onclick in the link.

Cd&
0
 
lz7cjcAuthor Commented:
so the onclick should call this function?

			$(document).ready(function(){
 
				$('.lightbox').click(function(){
					$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
					$('.box').animate({'opacity':'1.00'}, 300, 'linear');
					$('.backdrop, .box').css('display', 'block');
				});
 
				$('.close').click(function(){
					close_box();
				});
 
				$('.backdrop').click(function(){
					close_box();
				});
 
			});

Open in new window


How do I call it?

For the onclick is this correct?
<a onclick="functionname()">

Open in new window


thanks
0
 
COBOLdinosaurCommented:
The syntax is right you will just need the code to be in a named function what you have there now are anonymous functions.

Cd&
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
lz7cjcAuthor Commented:
ok so like this:
function open_box{
 
				$('.lightbox').click(function(){
					$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
					$('.box').animate({'opacity':'1.00'}, 300, 'linear');
					$('.backdrop, .box').css('display', 'block');
				});
 
				$('.close').click(function(){
					close_box();
				});
 
				$('.backdrop').click(function(){
					close_box();
				});
 
			});
 
function close_box()
			{
				$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
					$('.backdrop, .box').css('display', 'none');
				});
			}
 

Open in new window

<a onclick="open_box()">
0
 
lz7cjcAuthor Commented:
unfortunately this still isn't working:
			function open_box(){
 
				$('.lightbox').click(function(){
					$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
					$('.box').animate({'opacity':'1.00'}, 300, 'linear');
					$('.backdrop, .box').css('display', 'block');
				});
 
				$('.close').click(function(){
					close_box();
				});
 
				$('.backdrop').click(function(){
					close_box();
				});
 
			}
 
			function close_box()
			{
				$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
					$('.backdrop, .box').css('display', 'none');
				});
			}

var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                var center;
                navigator.geolocation && navigator.geolocation.getCurrentPosition(showPosition, showError) == undefined && showError();

                var infowindow = new google.maps.InfoWindow();
                var directionsService = new google.maps.DirectionsService();
                var directionsDisplay = new google.maps.DirectionsRenderer();
                directionsDisplay.setMap(map);

                var marker, i;

				var image_loc = "/images/mapicons/", image_low = image_loc + "markerlow.png", image_med = image_loc + "markermed.png", image_high = image_loc + "markerhigh.png", bike = image_loc + "bike.png";

for (i = 0; i < venues.length; i++) {

                        marker = new google.maps.Marker({
                        position: new google.maps.LatLng(venues[i][1], venues[i][2]),
                        map: map,
                        icon: Math.round(venues[i][3]) == 0 ? bike : ((Math.round(venues[i][3]) < 5) ? image_low : ((Math.round(venues[i][3]) > 10) ? image_high : image_med))

                                                         });

                        google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                        return function () {
                        infowindow.setContent(venues[i][0] + '<br/><a href="javascript:calcRoute(' + i + ')">How do I get there?</a><br>View on <a href="http://maps.google.com/maps?q=' + venues[i][1] + ',' + venues[i][2] + '">Google Maps</a><br><a onclick="open_box()" class="lightbox">Open Lightbox</a>');
                        

                        infowindow.open(map, marker);
                                            }
                                                                                                })
                        (marker, i));


                }
	

Open in new window


The map is appearing with the markers and the info boxes are showing, but when i click on open lightbox nothing happens

any ideas?

thanks
0
 
Robert SchuttSoftware EngineerCommented:
but when i click on open lightbox nothing happens

That's not entirely true. The function is called but all it does is attach a click event to the same link element you just clicked. (If you click the link again, it does show the box.)

If you execute the code instead of creating an event handler at that point, it works:
			function open_box(){
 
				//$('.lightbox').click(function(){
					$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
					$('.box').animate({'opacity':'1.00'}, 300, 'linear');
					$('.backdrop, .box').css('display', 'block');
				//});
 
				$('.close').click(function(){
					close_box();
				});
 
				$('.backdrop').click(function(){
					close_box();
				});
 
			}

Open in new window


Note that in the current code you are attaching another close handler each time you open a box. Since the '.close' and '.backdrop' elements already exist in the html, you can attach the close function in your document ready function. Another option would be to use an onclick attribute in the html:
    <div class="backdrop" onclick="close_box()"></div>
    <div class="box"><div class="close" onclick="close_box()">x</div>This is the lightbox!!!<br><br><div id="boxtext"></div></div>

Open in new window


By the way, the div.boxtext that I added above I used to set venue specific text:
                    google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                        return function () {

                            // one possible way to set the variable text in the box
                            $('#boxtext').html('Add information here specific to <b>venue ' + i + '</b>: <em>' + venues[i][0] + '</em>');

                            infowindow.setContent(venues[i][0] + '<br/><a href="javascript:calcRoute(' + i + ')">How do I get there?</a><br>View on <a href="http://maps.google.com/maps?q=' + venues[i][1] + ',' + venues[i][2] + '">Google Maps</a><br><a href="#" onclick="open_box()" class="lightbox">Open Lightbox</a>');

                            infowindow.open(map, marker);
                        };
                    })(marker, i));

Open in new window


Another "by the way": the reason the original $('.lightbox').click(...) doesn't work is that the element doesn't exist yet at that point. There is a way around that if you're interested and that is to use a delegated event:
                $('#map').on('click', '.lightbox', function(evt){
                    evt.preventDefault();
                    $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
                    $('.box').animate({'opacity':'1.00'}, 300, 'linear');
                    $('.backdrop, .box').css('display', 'block');
                });

Open in new window

This means the click is handled on the map element but only executes when a sub-element with .lightbox class is clicked, even if that element didn't exist yet at the time of the event creation. In this case the #map element must exist when you call this so you would put it in the document ready function.
0
 
lz7cjcAuthor Commented:
that is fantastic - I am going to have a go at sorting out how it displays on mobile myself but look out for a follow up question if i fail!

all the best and thank you
0
 
lz7cjcAuthor Commented:
Hi Robert
if you have a moment I have posted this related question:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28622486.html

thanks
0
 
Robert SchuttSoftware EngineerCommented:
I've seen it but haven't got an answer for you. It looks like you're using bootstrap classes, which I don't have experience with. A bit more info in the question could help get the conversation started.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 5
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now