Simple Modal + Google map, easy modal map boxes with jQuery

If you don’t know what Modal box is referring to, think about Lightbox. That’s it, the ‘new way’ (rather old now) of displaying pop-up boxes. Their are many scripts to add modal boxes to your content. Some very fancy, with loads of options and effects, others very simple and light.

I needed to display Google maps for a client in one of those modal box. After 5 min searching I stumbled across SimpleModal, a jQuery plugin that works quite well and is very light-weight.

The brief is as follow: I’ve got a link that point to a google map on google’s site. I want that in a modal box displayed when a user click on a link.

The modal box will be done by SimpleModal so no code needed here. Download the file and include it in your page header. Now we need to attach an event to every link that point to a map to trigger the modal box. To do that I’ve added a class to each link called ‘map’ and added a listener on each of them to trigger a function. In jQuery this looks like that:

jQuery(document).ready(function () {
	jQuery('.map').click(function (e) {
		jQuery.modal('content of the box');
		return false;
	});
});

Now to get the google map to display without anything around there is a simple trick: add ‘&output=embed’ at the end of the url.

The content in the box is something like this:

'<iframe src="'+this.href+'&output=embed"></iframe><p class="larger"><a target="_blank" href="'+this.href+'">View larger</a></p>'

this.href gets you the href value of the link, in our case the googlemap link, then we add the &output=embed to get rid of the rest of the page. After the iframe I’ve added a link to the map in case the user wants a larger version. This link open in a new window with the target blank.

So the complete code:

jQuery(document).ready(function () {
	jQuery('.map').click(function (e) {
		jQuery.modal('<iframe src="'+this.href+'&output=embed"></iframe><p class="larger"><a target="_blank" href="'+this.href+'">View larger</a></p>');
		return false;
	});
});

And a bit of css, taken from the plugin site. I’ve also added a bit to style up the view larger button:

#simplemodal-overlay {
  background-color:#000;
}

#simplemodal-container {
  height:400px;
  width:600px;
  background-color:#fff;
  border:3px solid #ccc;
}

#simplemodal-container iframe{
	height:400px;
	width:600px;
}

#simplemodal-container a.modalCloseImg {
  background:url(images/x.png) no-repeat;
  width:25px;
  height:29px;
  display:inline;
  z-index:3200;
  position:absolute;
  top:-14px;
  right:-18px;
  cursor:pointer;
}

#simplemodal-container p.larger a {
	background:url(images/viewlarger.png) no-repeat;
	display:inline;
	z-index:3200;
	position:absolute;
	bottom:-24px;
	right:-28px;
	cursor:pointer;
	color:#fff;
	padding-left:20px;
	height:20px;
	width:80px;
	text-decoration:none;
	font-size:0.8em;
}

Easy isn’t it?

Bookmark This () Tweet This Bookmark This (http://wordpressthemescollection.com/simple-modal-google-map-easy-modal-map-boxes-with-jquery-752.html)

One Comment