Google map in lightbox?
Permalink
Hello all,
I've been struggling to think of the best way of putting this together. I'm using Designer Content to create a block that basically provides information about hotels, and within the block I would like to provide a link to a google map showing the location of the hotel - but I would like this to appear in a lightbox rather than directing to another page. I'm planning on using the Extended Google Map plugin or the Page Mapper (Google Maps) plugin to create the actual maps.
If anyone has some pointers about the best way to go about this I'd be grateful. I've read a lot of the lightbox threads in the forums and they haven't really been any help so far.
Cheers,
Richard
I've been struggling to think of the best way of putting this together. I'm using Designer Content to create a block that basically provides information about hotels, and within the block I would like to provide a link to a google map showing the location of the hotel - but I would like this to appear in a lightbox rather than directing to another page. I'm planning on using the Extended Google Map plugin or the Page Mapper (Google Maps) plugin to create the actual maps.
If anyone has some pointers about the best way to go about this I'd be grateful. I've read a lot of the lightbox threads in the forums and they haven't really been any help so far.
Cheers,
Richard
Is the popup plugin you mention different to the Popup plugin in the c5 marketplace?
I have no idea at the moment how to go about using a jQuery plugin on my page/site.
I see what you're saying about it though, and it sounds like it might be a good way to go - although I was wondering if the google maps could be on separate pages and pulled from there into the lightbox.
I'm only dealing with about 17 different places, so for me a designer content block is by far the easiest way to go, specially as I need to break them up into different categories, and there will be no need for anyone to do searching for them. I never envisaged the Extended Google Map being actually "inside" the designer content block, just bring up the map in the lightbox from a link in the designer content block.
I have no idea at the moment how to go about using a jQuery plugin on my page/site.
I see what you're saying about it though, and it sounds like it might be a good way to go - although I was wondering if the google maps could be on separate pages and pulled from there into the lightbox.
I'm only dealing with about 17 different places, so for me a designer content block is by far the easiest way to go, specially as I need to break them up into different categories, and there will be no need for anyone to do searching for them. I never envisaged the Extended Google Map being actually "inside" the designer content block, just bring up the map in the lightbox from a link in the designer content block.
My suggestion was more of a do-it-yourself one - most jQuery plugins are pretty easy for a developer to use with a concrete5 site, but I appreciate that not everyone is happy to do that!
Many of the pre-build popup solutions tend to be automatic when it comes to adding things like title and next/previous buttons to cycle through images. bPopup just handles the lightbox side of things only.
Sound pretty reasonably about building that as a block. I tend to just err on the side of pages rather than blocks, for their ease of being able to make changes to them later on and because you can then use the Page List block with a custom template to do all sorts of tricks with the data elsewhere in your site. Again, I'm coming from the perspective of someone who normally has to custom code things up anyway.
Many of the pre-build popup solutions tend to be automatic when it comes to adding things like title and next/previous buttons to cycle through images. bPopup just handles the lightbox side of things only.
Sound pretty reasonably about building that as a block. I tend to just err on the side of pages rather than blocks, for their ease of being able to make changes to them later on and because you can then use the Page List block with a custom template to do all sorts of tricks with the data elsewhere in your site. Again, I'm coming from the perspective of someone who normally has to custom code things up anyway.
Yeah, well I'd love to muck around with it if I knew enough php, but don't ... only enough to cobble a few bits and pieces together and figure out more or less how stuff works ... and I don't have time to go learning how to do it at the moment .... so using existing plugins is definitely the way for me to go.
The way round the multiple block problem is to put them in a stack and then include that with the stack randomizer block (a random selection of 1/1 means it always delivers the selected stack). Or alternatively with a global areas block or parent area block.
An issue to watch out for on most maps blocks is that google maps won't render correctly if initialised inside a hidden dom element.
I posted a howto on generic solutions for this:
http://www.concrete5.org/documentation/how-tos/developers/improve-r...
To my knowledge, the only maps block currently implementing such a fix is Formigo Directions.
http://www.concrete5.org/marketplace/addons/formigo-directions/...
PS. And my own Blocks by Ajax addon, where ajax loading of the block content once it becomes visible can be used to resolve the problem
An issue to watch out for on most maps blocks is that google maps won't render correctly if initialised inside a hidden dom element.
I posted a howto on generic solutions for this:
http://www.concrete5.org/documentation/how-tos/developers/improve-r...
To my knowledge, the only maps block currently implementing such a fix is Formigo Directions.
http://www.concrete5.org/marketplace/addons/formigo-directions/...
PS. And my own Blocks by Ajax addon, where ajax loading of the block content once it becomes visible can be used to resolve the problem
I wondered about this John, I've put lots of things in lightboxes, but I'm yet to put in an actual Google Map. It doesn't surprise me to hear it doesn't like to be initialised in a hidden state.
I reckon some other ways around it might be to hide the map using techniques that still have some sort of sizing, so instead of using display: none, hiding the map area using absolutely positioning off of the viewport or using visibility: hidden. Regardless, it's good to know it's possible. Cheers for the tip.
I reckon some other ways around it might be to hide the map using techniques that still have some sort of sizing, so instead of using display: none, hiding the map area using absolutely positioning off of the viewport or using visibility: hidden. Regardless, it's good to know it's possible. Cheers for the tip.
Thanks for the heads up John, I'll remember that for another time.
http://dinbror.dk/bpopup/
What's great about this plugin is that it's got lots of options but it's actually style free, meaning you can make it look however you want.
With this you simply output the content you want to put in the lightbox to the page, into some container and then hide that container with CSS. Then you include the plugin and add a couple of lines to trigger a lightbox for that container off of some action. It takes care of all the interactions and all you have to do is a bit of styling on the container (background colour, size, etc).
In the case of your map, you could simply have a particular editable area in your template wrapped with a div, so that anything in the area is given the lightbox treatment - then you'd just put your google map block in that area. You'd need to add a bit of code to make it not hide in edit mode, but that should be pretty easy.
The only problem I can see with your approach though is that you can't really have a block for something and then have another block (in your case the Extended Google Map) inside that. You'd need to either have a custom page type or a block that ALSO handles the map side of things as well.
I'd suggest your problem is better handled with a custom page type and attributes, because then you can create a custom page list to list hotels and it's easier to search for them. I use pages and attributes for more database/listing kinds of things and blocks for more ad-hoc/smaller pieces of formatted content.