Solved

Launching a lightbox from google maps info box

Posted on 2015-02-18
9
405 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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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 …

758 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

21 Experts available now in Live!

Get 1:1 Help Now