CMS Made Simple Forums

Posted: **Mon Oct 06, 2008 1:28 pm**

Helllo,

For a large gallery of photos, I want to allow the viewer to open on each photo page a popup window containing a Google map centered on the photo location. I know how to

1) generate the map (using {SimpleGoogleMap map='mymap' lat='43.717788' long='10.399592'})
2) open a popup using the UDT below({popup url='generic_map_page' width='300' height='300', text='Click here to get the position of the photo on a map'}

But how can I pass the latitude and longitude from the parent page to the popup page ?
My galleries contain 1000 photos. Of course, I could create 1000 popup pages using hard-coded relevant latitude an longitude for each, but it looks rather clumsy.

In fact, I need to use a sort of new UDT "popup_SimpleGoogleMap" using paramaters

url (for generic_map_page)
width
height
text
latitude
longitude

Does anyone have ideas ?

Thanks
François

Code used for the popup :

// Verifiy UDT parameters.

global $gCms;

if (! isset($params['url']))
{
return;
}
else
{
$url = $params['url'];
}

if (isset($params['width']))
{
$width= $params['width'];
}
else
{
$width = 0;
}

if (isset($params['height']))
{
$height= $params['height'];
}
else
{
$height = 0;
}

if (isset($params['text']))
{
$text = $params['text'];
}
else
{
$text = "Click here";
}

// Insert script into output stream.

echo '

xMax)
{
w = xMax;
}

if (h yMax)
{
h = yMax;
}

// Center on screen.
var x = screen.availWidth / 2 - w / 2;
var y = screen.availHeight / 2 - h / 2;

var options = "";

options += "toolbar=no, location=no, directories=no, status=yes, ";
options += "menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, ";
options += "dependent=yes, ";

options += "width=" + w + ", height=" + h + ", left=" + x + ", top=" + y;

var popupWindow = window.open(url, "PopUp", options);
}
// -->
';

// Insert anchor tag into output stream.

echo "$text";

Posted: **Mon Oct 06, 2008 9:11 pm**

I also currently play around with google maps and "dynamic data". You could attach your infos as parameters...

e.g.

Code: Select all

index.php?page=popup?latitude=12.345&longitude=12.345&...

With the following smarty code you get them back into the page:

Code: Select all

{$smarty.get.latitude}

Depending on what info you have at hand per page, you can pass all variables as parameters. Then you can get the parameter data with smarty and build the required JS and Map on a specific map pop-up template (and then create a single page based on this template). So your template could look like:

Code: Select all

<__html>
  <head>
   ...
<__script__ src="http://maps.google.com/maps?file=api&v=2&key=YOUR_MAPS_API_KEY" type="text/javascript"></__script>

[YOUR GOOGLE MAPS JAVASCRIPT STUFF]

  </head>
  ...
</__body onload="initialize();" onunload="GUnload();">
 <div id="map_canvas" style="width: WIDTH; height: HEIGHT;"></div>
<__body>
</__html>

For [YOUR GOOGLE MAPS JAVASCRIPT STUFF] put in all the javascript you need (have a look what the module generates for you). To get the parameters into the JS, do something like this (pseudo-code):

Code: Select all

...

var point = new GLatLng({/literal}{$smarty.get.latitude}{literal},{/literal}{$smarty.get.longitude}{literal});

...

On your actual picture page, the code would look a bit like this:

Code: Select all

<__html>
  <head>

[YOUR FIX POPUP JAVASCRIPT STUFF]

  </head>
  ...
</__body>
 ...
  TEXT AND IMAGE, HTML & all
 
  <A HREF='javascript:popup("index.php?page=image_map&latitude=12.345&longitude=12.345", 300, 300)'>CLICK</A>
  ...
<__body>
</__html>

Hehe... a lot of pseudo code... but probably this can get you going.

Let me know if that worked for you.

Best
Nils

________
edit: ok, you could also add longitude and latitude to your PopUp Call and get the data somehow like the following into your generic map page:

Code: Select all

{SimpleGoogleMap map='mymap' lat=$smarty.get.latitude long=$smarty.get.longitude}

How do you have the information stored? As single content-blocks?

Posted: **Mon Oct 06, 2008 10:56 pm**

Thanks Nils for your answer.
I tried the simple way, using UDT i.e.:

1) in the calling page : {popup url='index.php?page=generic_map_page ?latitude=43.717788&longitude=10.399592' width='300' height='300' text='xxx'}
2) in the popup window named generic_map_page : {SimpleGoogleMap map='mymap' lat=$smarty.get.latitude long=$smarty.get.longitude}

But I dont't even get to the popup window because of an error 404 when I click on the link in the calling page. Did I use the correct way to pass the parameters ?

Thanks (or vielen dank...)

P.S The link showed in the status bar in the calling page is :
javascript:popup("index.php?page=generic_map_page?latitude=43.717788&longitude=10.399592", 300, 300)

Posted: **Tue Oct 07, 2008 9:19 am**

Hi fxv_cms,

mhh.. I see two question marks in your popup URL... try to exchange the seocnd one with an ampersand (&) so it would look like:

{popup url='index.php?page=generic_map_page&latitude=43.717788&longitude=10.399592' width='300' height='300' text='xxx'}

Does that work for you?

Best
Nils

Posted: **Wed Oct 08, 2008 3:31 pm**

Hi Nils,

Using the "&" character doesn't work to pass the parameter. I still get a 404 error.
So, I don't know if it's possible at all to pass parameters this way.

Regards
François

Posted: **Wed Oct 08, 2008 8:19 pm**

Very strange, I just made a quick sketch and it worked perfectly to pass the lat/lang to the map via URL.... are you sure you can reach your desired page and it is active? Why does the "&" not work for you?

What happens if you enter this into your browsers address bar directly:

Code: Select all

http://www.mydomain.com/index.php?page=generic_map_page&latitude=43.717788&longitude=10.399592

Even without your template being ready, at least the specific page should be loaded.

Can you reach your page like this?

Code: Select all

http://www.mydomain.com/index.php?page=generic_map_page

The 404 is most likely caused because you use two question marks in your page request (as far as I can tell).

The question mark before "page" already identifies that the coming stuff is parameters. With the "&" we just chain more parameters to our request.

Let me know if the two URLs worked for you.

Best
Nils
______
edit:

Probably the problem is somewhere else... where do you get your latitude longitude data from? Do you have extra content blocks in your template?

I was curious and tried your UDT... I have a very dirty installation which you could look at... last menu entry is a page called "map call". Click on it and you'll see your user tag at work... once how I called it and once executed so your see the link (it mostly does what I describe below).

"da DOT opticalvalve DOT com" (wrote it like that so it won't be indexed)

And your tag does more that it needs to... actually you could do it like that:

Take the Javascript part out of the UDT and place it into a fresh textfile that we call "popup.js". Srtip the tag, so your file only contains:

Code: Select all

function popup(url, w, h)
{
   var xMin = 50;
   var yMin = 50;

    var xMax = screen.availWidth * 0.7;
    var yMax = screen.availHeight * 0.7;

    if (w < xMin || w > xMax)
    {
        w = xMax;
    }

    if (h < yMin || h > yMax)
    {
        h = yMax;
    }

    // Center on screen.
    var x = screen.availWidth / 2 - w / 2;
    var y = screen.availHeight / 2 - h / 2;

    var options = "";

    options += "toolbar=no, location=no, directories=no, status=yes, ";
    options += "menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, ";
    options += "dependent=yes, ";

    options +=    "width=" + w + ", height=" + h + ", left=" + x + ", top=" + y;

    var popupWindow = window.open(url, "PopUp", options);
}

save it and upload t to your webserver

and link to your file in the template like this:

Code: Select all

...
<head>
...
<__script__ type="text/javascript" src="location-of-javascript-file"></__script> 
</head>
</__body>
...

This way, you can use the function e.g. on gallery pages and you do not have to paste the same function that often into page. Another benefit is, we can now spare the UDT... and spare the CMS a hit to the database. You can use the data directly in your template like this (depending on where you have the data from, let's assume variables:

Code: Select all

<A HREF='javascript:popup("index.php?page=map&lat=12.345&long=23.23", 300, 300)'>Hier</A>";

Posted: **Wed Oct 08, 2008 10:34 pm**

Hi Nils,

I retried and... it worked perfecly well. I must have done some silly mistake in the link name before. I also got rid of the UDT as you suggested, putting the call for the Javascript in the section of the CMS page "options" tab.

For the latitude and longitude data, I get them manually, using a freeware called Geosetter (here : http://www.geosetter.de/ : german-made !) It is really very easy to use and allows the modification of EXIFs and IPTCs. For 1000 photos, I got the whole data in 2 days. Tedious but efficient. GPS data are not always relevant, especially for photographs of distant landscapes where the location of the photographer is not important for the viewer.

Thank you very much for your help, Nils. I am impressed by the the time some people devote to helping others in this forum.

Regards
François

Posted: **Thu Oct 09, 2008 7:53 pm**

Cool that it worked out for you. Please put a [solved] to the original post

You approach brought me to an idea since I also want to publish more pics on my site. Where do you get the GPS data from? Do you just look for your location afterwards and write the geodata to your EXIF or do you have a GPS module in your camera/attached to the cam and can access the according EXIF?

Best
Nils

Posted: **Thu Oct 09, 2008 8:20 pm**

I look for the lat/lon data afterwrds

1) because I don't have a GPS
2) because the GPS only gives the location of the photographer which is of no interest for photos of distant landscapes, for instance.

Tha alternative would be to have a GPS linked with the camera's telemeter, but that may still be StarWars tehnology as for now...

Regards

François

CMS Made Simple Forums

[solved] How to popup a Googlemap based on latitude and longitude passed as para

[solved] How to popup a Googlemap based on latitude and longitude passed as para

Re: How to popup a Googlemap based on latitude and longitude passed as parameters ?

Re: How to popup a Googlemap based on latitude and longitude passed as parameters ?

Re: How to popup a Googlemap based on latitude and longitude passed as parameters ?

Re: How to popup a Googlemap based on latitude and longitude passed as parameters ?

Re: How to popup a Googlemap based on latitude and longitude passed as parameters ?

Re: How to popup a Googlemap based on latitude and longitude passed as parameters ?

Re: How to popup a Googlemap based on latitude and longitude passed as parameters ?

Re: [solved] How to popup a Googlemap based on latitude and longitude passed as para