Using Google Maps?

blizeH · December 16th, 2006, 10:07 AM

Hi guys!

First of all I apologise if this is in the wrong category, I really wasn't sure where to put it!

I'd love to put a Google map onto my site in this way;

Basically with a few controls, showing the exact location and a bit of information about the page. Or if that's not possible, even just showing the exact location with that 'A' button type thing.

I've tried implementing the map onto the site but it's just showing the address in some very wierd way, and also showing an area in Spain and I've no idea how to change it.

Any advice or ideas please?

Many thanks!

spinal007 · December 16th, 2006, 10:23 AM

See this:
http://www.pinesandneedles.com/Chris...ristmas-Trees/
http://www.pinesandneedles.com/Chris...ristmas-Trees/

You can copy the HTML and Javascript used to generate the map....

To get the coordinates to your map, find the point using the Google Maps website, click on 'Link to this page' then get the latitude and longitude coordinates from the url...

blizeH · December 16th, 2006, 10:48 AM

Huge thanks for the code! That's perfect; exactly what I'm after!

Having a bit of trouble implementing it though; http://www.thebelfryhotel.co.uk/

Any ideas what I've done wrong please? Also, what is the code with lots of percentage signs? i.e. "%72%6F%6E%"

Thanks again!

Ryan Fait · December 16th, 2006, 07:05 PM

The site looks good, spinal. You have really weird zip codes, though.

blizeH · December 17th, 2006, 11:22 AM

blizeH · December 17th, 2006, 05:10 PM

Sorry to bump this yet again, but if you get a chance to have a quick look that'd be great, thanks!

spinal007 · December 18th, 2006, 07:57 AM

fwxAttachEvent(window, "load", function(){ ... });
...is my own script for attaching window events.

You should just use...
window.onload = function(){ ... };

These....
%72%6F%6E
...are encoded HTML.

The site is run by a CMS and the user might end up putting > < ' " in the text used in the label. I encode it so to avoid runtime errors and undefined strings...

Remember to load the google map script...
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY_GOES_HERE&" type="text/javascript"></script>

Then all you need is something like...
window.onload = function(){
var GoogleMap1 = new GMap2(document.getElementById("GoogleMap1"));
GoogleMap1.addControl(new GSmallMapControl());
GoogleMap1.addControl(new GMapTypeControl());
GoogleMap1.setCenter(new GLatLng(51.526, -0.191), 15);
var GoogleMap1point = new GLatLng(51.819247, -2.480292);
var GoogleMap1marker = new GMarker(GoogleMap1point, 1);
GoogleMap1.addOverlay(GoogleMap1marker);
GoogleMap1marker.openInfoWindowHtml("Hello world!");
};

spinal007 · December 18th, 2006, 08:04 AM

Quote:

Originally Posted by ryanfait

The site looks good, spinal. You have really weird zip codes, though.

LOL, Thanks Ryan...

I think London postcodes are great...
W# for west London
N# for North London
S# for South London
and so on....

Never mind the rest of the UK though...

Ryan Fait · December 18th, 2006, 08:19 AM

That's cool. We just have five boring numbers. And sometimes you can use a hyphen and add four more if you feel like it. Go figure.

blizeH · December 18th, 2006, 08:41 AM

Huge thanks again for the info and code, I've updated it accordingly (I think I've done it right?) and it's still not showing for some reason

Iv'e obviously gone wrong somewhere, but can't see any errors, hmm!

spinal007 · December 19th, 2006, 10:30 AM

This is the problem...
<body onload="load()" onunload="GUnload()">
...causes an error when the page loads and JS execution stops
Just use '<body>'

##############

Wrong element IDs:
var GoogleMap1 = new GMap2(document.getElementById("GoogleMap1"));
<div id="map" style="width: 500px; height: 300px"></div>

blizeH · December 20th, 2006, 07:39 PM

What a star!

Thank you so much!

spinal007 · December 21st, 2006, 11:30 AM

No worries

Looking good by the way!