Google Maps integration

If you have created additional (non official) documentation or tutorials or something like that please post this here
SNap
Posts: 314
Joined: Wed 5. May 2004, 10:45
Location: Passau, Bavaria, Germany
Contact:

Google Maps integration

Post by SNap »

hi,

i managed to integrate google maps:

http://www.sl-kosmetikschule.de/karte.phtml


you have to signup for google maps...

http://www.google.de/apis/maps/signup.html

in the generated example-code you have to copy

Code: Select all

    <script src="http://maps.google.com/maps?file=api&v=2&key=yourkey"
      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>
into your html head code of a new template.

place

Code: Select all

load()
in JS onload field

create an article with html content-part:

Code: Select all

<div id="map" style="width: 500px; height: 300px"></div>
that's all....

if you wish you can fine-tune:

Code: Select all

<script src="http://maps.google.com/maps?file=api&v=2&key=yourkey"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
// Creates a marker at the given point with label
function createMarker(point) {
  var marker = new GMarker(point);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("<br><b>your name</b><br>your adress");
  });
  return marker;
}
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 15);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());        
        var point = new GLatLng(37.4419, -122.1419);
        map.addOverlay(createMarker(point));
      }
    }
    //]]>
</script>
best way to get your coordinates is to go to

http://maps.google.com/

enter your adress ... find it...

at the top right there is a link to copy the url to this map to clipboard.... paste it in an editor or something.... find the coordinates in that string... usually after the LL=... ...take it. paste it in GLatLng... be happy!

Cheers
SNap
Last edited by SNap on Mon 13. Nov 2006, 16:49, edited 2 times in total.
'welcome to the real world!' datensysteme-lenk
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

Hi SNap,

did you read this? http://www.google.com/intl/de_ALL/help/terms_maps.html
It´s very importand. (... gewerbliche Zwecke ...)

Gruß Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
SNap
Posts: 314
Joined: Wed 5. May 2004, 10:45
Location: Passau, Bavaria, Germany
Contact:

Post by SNap »

i read this:

http://maps.google.de/support/bin/answe ... swer=26392
google wrote: Kann ich Karten von Google Maps zu meiner Website hinzufügen?

Ja, das ist möglich. Die Google Maps-API kann auf jeder kostenlos verfügbaren Website implementiert werden.
sounds good enough to me.. ;)

Cheers
SNap
'welcome to the real world!' datensysteme-lenk
User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Post by Heiko H. »

Hi,

this here:

http://www.google.de/apis/maps/faq.html#faq4

sounds good too.

THX SNap
ff123
Posts: 172
Joined: Thu 9. Jun 2005, 20:03
Location: The Netherlands
Contact:

Post by ff123 »

Hi Snap,

Thanks for the tutorial! :D

I managed to integrate google maps in phpwcms, took me about 2 hours. 8)

For the result:
http://www.stichtingflash.nl/contact.phtml

Regards, groeten,
vuurvos
-- Vuurvos --
User avatar
Kosse
Posts: 1066
Joined: Thu 9. Sep 2004, 12:08
Location: Brussels, Belgium
Contact:

Post by Kosse »

Hey thx to all for this, nice one.
Thx 2 snap for tut and vuurvos for the example (nice site, well coded btw ;)

Cheers
vectrus
Posts: 7
Joined: Sun 19. Nov 2006, 14:46
Location: Den Haag Netherlands
Contact:

1.2.8 version integration problem wit google maps

Post by vectrus »

high,

just wondering if there any issues with the 1.2.8 version. I have 3 implementations of wich only 1 actualy works but that is version 1.2.6.
http://www.koffieendromen.nl/contact.phtml, but an implementation of 1.2.8. gives me a none working map : http://www.englebertstijlslagerij.nl/in ... _englebert doesnt show a map @ all but gives a java error. Setting it up as a XHTML page shows the map but all the othe content scrolls behind it.

Please advise

Julius

P.S. i use CSS/DIV layout on both examples
SNap
Posts: 314
Joined: Wed 5. May 2004, 10:45
Location: Passau, Bavaria, Germany
Contact:

Post by SNap »

i've just done it 2 times with 1.2.8 ... no problems at all.
'welcome to the real world!' datensysteme-lenk
Audax
Posts: 32
Joined: Wed 8. Jun 2005, 17:01

Post by Audax »

Hello Vectrus, i don't see the problem.
Your second site shows the Google Maps, just like the first one. So what's the problem, 'cause the rest of your website seems to run just fine too!
*Using Firefox 2.0*

Wait... in IE i see your problem, it won't show the sattelite image. Strange... The first one looks ok, your second link fails to work with sattelite but with the normal map image. *That's with IE 6*
Cogito, ergo sum..
SNap
Posts: 314
Joined: Wed 5. May 2004, 10:45
Location: Passau, Bavaria, Germany
Contact:

Post by SNap »

i can see on his second site all versions. in IE7 and FF2!

Cheers
'welcome to the real world!' datensysteme-lenk
vectrus
Posts: 7
Joined: Sun 19. Nov 2006, 14:46
Location: Den Haag Netherlands
Contact:

Google map working

Post by vectrus »

Yes, i finaly got it working, but to be honest. Inplementations of both websites differ a lot. It wont work in version 1.2.8, without using an aditional <body onload="load()"> and that bothers me a bit. But indeed it is working.

Thanks for looking though.
loub0999
Posts: 28
Joined: Sun 10. Dec 2006, 04:27
Location: Montreal, Quebec, Canada
Contact:

Post by loub0999 »

Google's support page explains in a thousand ways how to use the API. I had a load of trouble getting the map centered to the right address. I've included what I found was easiest to use with the above examples. This method generates an XML page with all the tags nicely formated, that you can just plug into the appropriate fields from the above examples. :)

http://www.google.com/apis/maps/documentation/

Code: Select all

TTP Request

To access the Maps API geocoder directly using server-side scripting, send a request to http://maps.google.com/maps/geo? with the following parameters in the URI:

    * q -- The address that you want to geocode.
    * key -- Your API key.
    * output -- The format in which the output should be generated. The options are xml, kml, csv, or json.

In this example, we request the geographic coordinates of Google's headquarters.

http://maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&output=xml&key=abcdefg
You may have to reverse the order of the latitude, longtitude generated, my first try ladded me near Antartica! :evil:
The only limits that exist, are those we impose on ourselves!
-me
Shapeshifter
Posts: 46
Joined: Tue 25. Oct 2005, 22:27

Post by Shapeshifter »

Hi,

GERMAN:

das ganze klappt bei mir einwandfrei mit 1.2.8! Vielen Dank vorweg.
Ein Problem habe ich allerdings ... ich verwende das VCSS Menü. Die Sub-Menüs, welche in Form von Popups erscheinen werden durch die Karte verdeckt/überlagert.
Kann man das fixen?

ENGLISH:

it works fine with 1.2.8! Thanks in advance. But I have one problem ... I am using the VCSS Menu. The Sub-Menus, that appear as Popups, are kind of "overlayed" by the maps so they are barely visible.
Is there any way to fix that?

Grüße/Regards
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

Hi,

at what point of rendering this map is generated? Bevore or after the Nav menu?
I think you must use z indexes to solve this problem.

Regards Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Shapeshifter
Posts: 46
Joined: Tue 25. Oct 2005, 22:27

Post by Shapeshifter »

Hi,

my site structure looks like this:

<div id="wrapper">
<div id="left">{NAV_LIST_UL:VCSS,0,,,active}</div>
<div id="content">{CONTENT}</div>
<div id="right">{RIGHT}</div>
</div>

I am generating the map at the div "content". I already tried to five the div "left" z-index 2 while div"content" gets z-index 1 but that does not work.

EDIT: I solved it. I did not see, that inheritation does not work with z-index so you have to use this property straight on the class sub_no of the vcss.

EDIT: I have another problem. I do not see any map on IE, maybe some JS-Error?! Here is my code (xxxx are just placeholders, of course I put in my data):

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

//<![CDATA[

function createMarker(point) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<b>xxxx</b><br>xxxx");
});
return marker;
}

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.373975, 9.790835), 15);
var point = new GLatLng(52.373975, 9.790835);
map.addOverlay(createMarker(point));
}
}

//]]>
</script>
Post Reply