Solved

Launching a lightbox from google maps info box

Posted on 2015-02-18
9
415 Views
Last Modified: 2016-02-25
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
Comment
Question by:lz7cjc
  • 5
  • 2
  • 2
9 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40617367
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
 

Author Comment

by:lz7cjc
ID: 40617582
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40617706
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
 

Author Comment

by:lz7cjc
ID: 40617784
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:lz7cjc
ID: 40618382
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
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40624948
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
 

Author Comment

by:lz7cjc
ID: 40625441
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
 

Author Comment

by:lz7cjc
ID: 40625739
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
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40626044
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now