Integrating a GoogleMap into an article?

Harald Weingaertner · Post by **Harald Weingaertner** » Thu Jun 22, 2006 3:09 pm

Hello,

was someone able to integrate a googlemap into an article yet?

The code to implement is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=googlekey"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

I've read a lot into this forum but all i've seen is, that no one had done it until now. Maybe someone has an idea to display google maps in entries now.

I tried "Static pages" and a map was shown (but the html code was totally messed up).
I tried "Extened Options" for articles and defined some code to display the map, like i did for YouTube videos. This also didn't work.
I tried to paste the above code into an article and nothing was shown.

Maybe someone has a hint for me. Also if it really does not work, it would save some time

Regards, Harald

Post by **garvinhicking** » Thu Jun 22, 2006 3:57 pm

Hi!

1. Edit your index.tpl template and in the head section put this:

Code: Select all

<script src="http://maps.google.com/maps?file=api&v=2&key=googlekey" type="text/javascript"></script>

(Of course insert the right googlekey)

2. Enter the extended entry properties plugin configuration. Add a new Customfield called "googlemap".

3. Edit your entries.tpl template. At the place where you have your {$entry.body} sitting, add this:

Code: Select all

{if $entry.properties.ep_googlemap}
<div id="map{$entry.id}" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map{$entry.id}"));
        map.setCenter(new GLatLng({$entry.properties.ep_googlemap}), 13);
      }
    }
    //]]>
</script>

4. Create a new entry. In the googlemap custom property, add this:

Code: Select all

37.4419, -122.1419

5. Save the entry, view it on your blog. Basically the map should then be shown for your entry, I hope.

This is untested.

HTH,
Garvin

Harald Weingaertner · Post by **Harald Weingaertner** » Thu Jun 22, 2006 5:42 pm

Thanks garvin, i tried this (also before) and get the following error:

Fatal error: Smarty error: [in file:/home/www/doc/templates/bex01/entries.tpl line 39]: syntax error: unbalanced parenthesis in if statement (Smarty_Compiler.class.php, line 1256) in /home/www/doc/bundled-libs/Smarty/libs/Smarty.class.php on line 1088

I've pasted axactly the above code.

Code: Select all

                {$entry.multilingual_footer}{$entry.body}
                
                {if $entry.properties.ep_googlemap}
<div id="map{$entry.id}" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
    //<![CDATA[
    function load() {

      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map{$entry.id}"));
        map.setCenter(new GLatLng({$entry.properties.ep_googlemap}), 13);
      }
    }
    //]]>
</script>
                
                
                {if $entry.has_extended and not $is_single_entry and not $entry.is_extended}

Zeile 39 ist die Zeile mit "function load()"

PS: Roba, thanks, i tried your plugin before and did not manage to get the map onto my article page

Post by **garvinhicking** » Fri Jun 23, 2006 10:12 am

Hi Harald!

Ups, I'm sorry. I forgot to escape the javascript within the template.

You need to replace all "{" with "{ldelim}" and all "}" with "{rdelim}" within the javascript:

Code: Select all

                {$entry.multilingual_footer}{$entry.body}
                
                {if $entry.properties.ep_googlemap}
<div id="map{$entry.id}" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
    //<![CDATA[
    function load() {ldelim}

      if (GBrowserIsCompatible()) {ldelim}
        var map = new GMap2(document.getElementById("map{$entry.id}"));
        map.setCenter(new GLatLng({$entry.properties.ep_googlemap}), 13);
      {rdelim}
    {rdelim}
    //]]>
</script>
                
                
                {if $entry.has_extended and not $is_single_entry and not $entry.is_extended}

HTH,
Garvin

Harald Weingaertner · Fri Jun 23, 2006 11:29 am

Hi and thank you very much.

The error message is gone, but still no map

I guess it is because of the

Code: Select all

  <body onload="load()" onunload="GUnload()">

When i put this into the index.tpl the maps loads, but then all s9y pages have the onload command in the body

Maybe someone with html skills comes along and knows a better way to load the maps. Thanks garvon for the changed script!

Post by **garvinhicking** » Fri Jun 23, 2006 11:34 am

Hi!

Try this:

Code: Select all

                {$entry.multilingual_footer}{$entry.body}
               
                {if $entry.properties.ep_googlemap}
<div id="map{$entry.id}" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
    //<![CDATA[
      if (GBrowserIsCompatible()) {ldelim}
        var map = new GMap2(document.getElementById("map{$entry.id}"));
        map.setCenter(new GLatLng({$entry.properties.ep_googlemap}), 13);
      {rdelim}
    //]]>
</script>
               
               
                {if $entry.has_extended and not $is_single_entry and not $entry.is_extended}

Harald Weingaertner · Fri Jun 23, 2006 11:42 am

My hero !! Works great! Thank you!

Post by **garvinhicking** » Fri Jun 23, 2006 11:53 am

Hi!

You're welcome! What's your URL so that we can see it?

BTW, your profile icon really scares me off

Harald Weingaertner · Fri Jun 23, 2006 12:20 pm

http://zeitlos.webgurus.de/kategorie/5-Franklinstrasse

But it's just temporary for testing. But i'm really satisfied with it

Even with my profile picture

Harald Weingaertner · Fri Jun 23, 2006 11:43 pm

Garvin, are you able to help me again?

When calling http://zeitlos.webgurus.de/kategorie/5- ... nstrasse-V

with Firefox everything is fine. When calling this page with IE i get an error message. I guess you have both browsers installed

Would you try to open this page and maybe you have a hint for me.

It only happens when calling a page with an embedded GoogleMap. I have no idea

Errormessage is: "Die Internetseite http./... kann nicht geöffnet werden. Vorgang abgebrochen."
After confirming with OK you get "Fehler: Server oder DNS kann nicht gefunden werden"

Edit: The problem seems to be, that the javascript is called within a TABLE and IE handles this different from FF. So you cannot help me

I now would need to call the javascript into the header what is impossible, because i have only 3 maps on the website and don't want to load the javascript on every page of the blog. Difficuilt problem

It would help me, if i could add some code between the HEAD tags for those 3 pages... I guess this will not work.

Post by **garvinhicking** » Sat Jun 24, 2006 12:53 am

Hi!

Phew, never heard of that error. Luckily IE really sucks at debugging. I'm sorry, I don't really have a clue. Maybe the nice people of google can help you? It seems as if it's something with the script.

Regards,
Garvin

Harald Weingaertner · Sat Jun 24, 2006 12:59 am

garvinhicking wrote: Phew, never heard of that error. Luckily IE really sucks at debugging. I'm sorry, I don't really have a clue. Maybe the nice people of google can help you? It seems as if it's something with the script.

Yes, it is. I know where the error is - i just don't know how to fix it

Has nothing to do with serendipity.

Thanks again!

micxer · Post by **micxer** » Tue Jul 18, 2006 11:22 pm

Hi, I tried to make the whole map thing a bit more configurable. So it looks like this:

Code: Select all

<div class="serendipity_entry_body">
              {$entry.body}
              {if $entry.properties.ep_googlemapvals and $entry.properties.ep_googlemappoints and $entry.properties.ep_googlemapwidth and $entry.properties.ep_googlemapheight}
                <div id="map{$entry.id}" style="width: {$entry.properties.ep_googlemapwidth}; height: {$entry.properties.ep_googlemapheight};"></div>
                <script type="text/javascript">
                    //<![CDATA[
                      function load() {ldelim}
                        if (GBrowserIsCompatible()) {ldelim}
                          var valstring = "{$entry.properties.ep_googlemapvals}";
                          var vals = valstring.split(",");
                          var map = new GMap2(document.getElementById("map{$entry.id}"));
                          map.setCenter(new GLatLng(vals[0], vals[1]), vals[2]);
                          {$entry.properties.ep_googlemappoints}
                        {rdelim}
                      {rdelim}
                    //]]>
                </script>
              {/if}
              {if $entry.properties.ep_belowgooglemap}
                {$entry.properties.ep_belowgooglemap}
              {/if}
            </div>

The strange thing is, that it's not working this way. But if you replace

Code: Select all

map.setCenter(new GLatLng(vals[0], vals[1]), vals[2]);

with

Code: Select all

map.setCenter(new GLatLng({$entry.properties.ep_googlemapvals}), 15);

it is working. Supplied is

Code: Select all

1.234,1.234,15

for the first case and

Code: Select all

1.234,1.234

for the second. What is the difference in giving values from a variable instead of writing it in directly? Is anyone able to help me with this?

judebert · Post by **judebert** » Wed Jul 19, 2006 11:28 pm

Don't you have to use the $ in front of the array value?

Code: Select all

map.setCenter(new GLatLng($vals[0], $vals[1]), $vals[2]);

Or am I still thinking in Perl?

Post by **garvinhicking** » Thu Jul 20, 2006 12:17 pm

Hi!

$ is not required in JavaScript. I think the problem is the "var vals" which might not output the right values. Use alert(vals[0]) inside your load function to see what the JS is returning there.

HTH,
Garvin

Integrating a GoogleMap into an article?

Integrating a GoogleMap into an article?

Re: Integrating a GoogleMap into an article?