Solved

Launching a lightbox from google maps info box

Posted on 2015-02-18
9
433 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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
 

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

825 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