Google Maps integration

[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&amp;v=2&amp;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&amp;v=2&amp;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

[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

[SNap]

i read this:

http://maps.google.de/support/bin/answe ... swer=26392

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

[Heiko H.]

Hi,

this here:

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

sounds good too.

THX SNap

[ff123]

Hi Snap,

Thanks for the tutorial!

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

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

Regards, groeten,
vuurvos

[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]

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]

i've just done it 2 times with 1.2.8 ... no problems at all.

[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*

[SNap]

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

Cheers

[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]

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!

[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

[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

[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&amp;v=2&amp;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>