an All Creative World site
Josh's picture
151 pencils

Google™ Maps on Your Website

Google Map Image
There's only one thing on the net cooler than Google™ Maps. What could possible be cooler than that?

Putting an interactive map on your own website.

Google™ has released the API for their mapping system, so now you can develop websites using their maps. And it's much easier than you may think!

The possibilites are endless. So far I've seen it used for placing pins on a satelite map to point out users caught a fish. Clicking the pin brings up the famous little bubble, complete with info on the bait used, conditions, etc. Some police stations are also using it show where crimes occured recently on their websites. I've been using it on my site to track car meets and give directions.

Enough with the Jabber! Let's get on to how it's done!

1) I've attatched a javascript file that is necessary for this code to work - download it, extract the zip, and then upload it to your site's home directory. I'll explain why I'm having you download this instead of linking to the existing one later.

2) Request a free key for the Google™ Maps API here.

3-a) Add the following code to the page you want the map to be on. If you are using Drupal or another CMS, follow step 3-b instead!
src="http://maps.google.com/maps?file=api&v=1&key=abcdefg"
type="text/javascript">
src="gmapez.js"
type="text/javascript">

Notice: I used Z instead of S in the word script so it would post here. When you add the code, make sure to replace the Z with S!
The code needs to go on the BOTTOM of the page before the body close tag (after your last div) so the HTML is parsed before the javascript file is called. Not doing this will cause your site to be unviewable in IE and other browsers.

3-b)For Drupal or other CMS's that use a template system: Add the above code to the bottom of your page.tpl (or whatever your main page template file is).

NOTE: In Drupal you MUST have clean URLs turned OFF. Since the API key is only for one directory, clean URLs cause an error message on all but the registered URL. With clearn URLs off, all your pages work perfectly. Hopefully Google™ addresses this issue in the future.

4) To insert a map on your page, check out http://bluweb.com/us/chouser/gmapez/docs.html for quick code snippets. Only use the main code - don't worry about the first block that shows the javascript - we've already taken care of this. I had you download the file rather than link to theirs so your site will continue working should that site go down, be moved, etc.

5) All done. Easy as pie!

Let me know if you have any questions!

AttachmentSize
gmapez.zip2.37 KB

---------------------
Josh Stevens | My Site
My CB Blog

Commenting on this Blog entry is closed.

huyaroo's picture
27 pencils

This is really cool. I saw a site that uses this in conjunction with apartment listings on craigslist. I don't see any way I can use this right now though.

ttaylor's picture
78 pencils

I also don't see a use for it for myself, but I did recently come across a site that used it to maps out running routes, telling you exactly how far certain routes are. You pick the start and the finish and it tells you in mileage how far or a run/walk it'll be.

Gotta love Google!

wesko's picture
2 pencils

If you create a track log by SMS or through the web site, it will automatically tell you the distance, direction, speed etc. Also in profiles.

Speed profile: http://www.poi66.com/maps/show_album?album=rvnawaka

Height profile: http://www.poi66.com/maps/show_album?album=ballon

You might want to visit www.poi66.com first to set the proper language.

__________________

http://www.poi66.com for all GPS2SMS: send your GPS location by SMS to a map on your web page!

ckng@www.drupal.org's picture
1 pencil

I've put up another way to add the script into drupal without modifying the template.
See http://nice3z.homeip.net/googlemap

Josh's picture
151 pencils

Especially helpful if editting the theme isn't allowed or anything.

---------------------
Josh Stevens | My Site
My CB Blog

Ivan's picture

It's worth noting that it IE will puke on lots of different things in
Google Maps without the proper markup. For example, I found it
important to put this attribute in my tag:

xmlns:v="urn:schemas-microsoft-com:vml"

Also, any DOM altering Javascript must NOT be in the document body, IE
hates this.

Google Maps is also extremely picky with referring URL's, I would say
too picky. If you apply for a GMaps key with a "www" in your URL, you
will always need that. If you have alias domain names pointing to your
website, you will need to redirect to the proper URL.

I put all my domain name checking stuff in my .htaccess file. All you
got to do is check for the domain name which you applied for a GMap
Key for. If you don't find it, redirect the user to that URL (with
their original request, so it's a seamless transfer).

For example, I applied for a GMap key with the following URL:
http://www.stephansautohaus.com/location/

To take into account an alias domain name and a missing "www", I used
the following rule to make sure the user would never be prompted with
the annoying GMap Javascript alert:

RewriteCond %{SERVER_NAME} !^www\.stephansautohaus\.com$ [NC]
RewriteRule (.)* http://www.stephansautohaus.com%{REQUEST_URI} [R,L]

It helped me out a lot :)

---
http://www.sacramentoweb.org/

Josh's picture
151 pencils

The only way I could get IE to work is by putting the javascript in the body - but below the last div. ???

Having it in the headers where it usually goes caused IE to display an error and not load any bit of the page.

I think it might depend on which javascript file you use. For example, IE doesn't like the gmapez javascript file in the headers. But the javascript in use at http://fisherdiary.com seems to work just fine in the headers.

I just wish Google applied API keys to domains, rather than specifical URLs.
---------------------
Josh Stevens | Nautilus7 Design
My CB Blog

---------------------
Josh Stevens | My Site
My CB Blog

justinperkins's picture
1 pencil

Josh, the need for you to put the javascript after the last div is because if you put it anywhere else then the div doesn't even exist when you try to create the map (because you're not waiting for the page to completely load). You should try using window.onload to attach events to fire once the page is fully loaded.

Like I said above (in the comment Ivan submitted for me), any DOM-altering javascript should not be in the body. You do not have any DOM-altering javascript in the body, only a call to dom-altering script, there is a difference.

Here's a link that some people might find beneficial, especially when dealing with problems in IE:
http://www.google.com/apis/maps/documentation/#XHTML_and_VML

Josh's picture
151 pencils

I'm a newb when it comes to javascript, so that explanation helps make some more sense out of this.

I installed the location.module and googlemap.module so maps could automagically be created based on simple keywords the user enters. The problem was, IE wouldn't render any part of the site. So I had to go back to manual creation of the maps and the EZMap javascript.

If the IE stuff could be worked out, the combonation of those modules would add A LOT of cool potential to a Drupal site.

This kind of stuff really excites me and makes web development and wanting to learn PHP and javascript really fun.

---------------------
Josh Stevens | Nautilus7 Design
My CB Blog

---------------------
Josh Stevens | My Site
My CB Blog

gian's picture
1 pencil

The map works GREAT!! but adding the javascript has it displayed on the site page.. what can I do to hide the script or am I doing something wrong??

natobasso's picture
3951 pencils

Just grab the iframe code; don't think it requires javascript.

----
Natobasso
dirtandrust.com
"Powerpoint is not a design application"

denvercoffee@creativebits.org's picture
1 pencil

I am a complete newb to any of this stuff, so after some work, i came up w/a site: http://www.denvercoffeespots.com

The only problem I ahve is that it's a pain to add new locations... you have to go to google.. type in the address... then click manually on the location, then hit link to this page, then copy that code back over into your html. What I'm wondering is if there is a more automated way to do this... I figure there has to be if a project like the craigslist/housingfinders site is viable.

riyada's picture
2 pencils

I am a very newby in thius
Here is my first map of places I hace lived.
I managed so far to put the markers, but can't figure out how to code for the pop ups with text and images.
Would someone have a look at my code, and see how i can implement it
http://ranabtawi.com/googlMapTagged.shtml

Thanks

wesko's picture
2 pencils

Seems that bluweb.com (GMapEZ hoster) is offline? I'm happy I copied the script and icons!

http://www.poi66.com for all GPS2SMS: send your GPS location by SMS to a map on your web page!

riyada's picture
2 pencils

Map here:
http://www.ranabtawi.com/Rio.shtml

works fine in Firefox.. Any reason why the tags don't show up in IE?

karuna's picture
1 pencil

i am using google maps API in my website. I have to find out latitude and longitude of the addresses provided by the user. The problem is that maps.google.com is returning different latitude and longitude from that of returned by my site. Is that google uses two different resources to find out the latitude and longitude.

Anonymous's picture

Use Google Maps API to insert Google Maps in your web site.
Its only a 5 minute process. Refer following post:
http://www.etechplanet.com/post/2009/02/25/How-to-insert-google-maps-in-a-website.aspx

Anonymous's picture

Thank you for this.

Felix Michael
Web Design, Yeovil, Somerset

Anonymous's picture

GoRoam just released a new tool that makes it even easier to drop a Google Map onto your website and geotag stuff on the map. Go to http://geo.goro.am to read the instructions.

Anonymous's picture

good work

Anonymous's picture

Hi... I can not get this error message to go away... does anyone know what to do? Thank you...

Anonymous's picture

Dear kind people on this blog..
I could not figure out.. so I posted as this....

Please help if you know what to do...
Thank you!

googlemaps's picture
1 pencil

Cut corners with Google maps for low quality mapping. How tight must a business be to use Google ?

The directions suck and the accuracy is poor. People use them out out convenience as its certainly not quality. The customisation is weak and there enterprise programme is a rip off for what minimal functions you get !

sp_key's picture
1 pencil

Josh, nice and simple article.
One thing I don't get. Why do you need to apply for a Google API key?
Can't you just create a map by going to Mymaps and copying the iframe code as provided by Google directly into your website?

This is exactly what I have done in mine at my top attractions page here: http://live-zakynthos.com/content/zakynthos-top-attractions.html

Many thanks
Spyros

ertwebdesign's picture
2 pencils

Alright, I am trying to get this code to work with no luck. I have a list of many locations that I have loaded into a mySQL table. I want a search box that acts like Google Maps where I can type in an address, street intersection, city, state or zip (or maybe even a location name if possible) and have it search several fields of my database and auto-plot the locations within X miles of the search string. I am new to this, so any help would be appreciated!

ertwebdesign's picture
2 pencils

Alright, found a great article and got it working pretty smoothly, if anybody is trying to do the same thing (it helped once I changed my search terms to "create a store locator")

http://code.google.com/apis/maps/articles/phpsqlsearch.html

Steve007's picture
1 pencil

This article gives the light in which we can observe the reality.
This is very nice one and gives in depth information.
Thanks for this nice article Good post.....Valuable information for all.
I will recommend my friends to read this for sure.
http://www.builders4u.com.au

Elect123's picture
1 pencil

I want to express my admiration of your writing skill and ability to make
reader to read the while thing to the end. I would like to read more of
your blogs and to share my thoughts with you. I will be your frequent visitor, that’s for sure.
http://www.electricians4u.com.au
I want to thank you for this superb read!! I certainly enjoyed every little bit of it.
I have bookmarked your site to check out the latest stuff you post.

diucus's picture
1 pencil

I am new to this sort of thing, can somebody explain me,do we download the entire GOOGLE MAPS API and embed it on our website or we just use the API without having to download it?

thank you

sha's picture
1 pencil

m sorry i am a junior developer, i did what u said but still there is no google map on website, m running it on local i generated the key downloaded the gmapez.js and renamed it with "S" and i copied the script of second heading

"Add a marker"

from the address u have given, but still no result, can u please guide me more?? i shall be really really thankful to you, actually i want google map with location pointing i want. (with Address).

wis3384's picture
5 pencils

oh nice idea austin ...very creative hmmmm

Founder of Lebanon Web Design and seo in Beirut

sogni's picture
3 pencils

Maybe anyone has tryed Microsoft or Yahoo Maps services? Is it better or not vs. Google Maps?

Do not evil.

theregoesbod's picture
1 pencil

Is there a plug-in for wordpress that does this?

Creativebits is a blog about Creativity, Graphic Design, Adobe, Apple and other related subjects.

Featured Images

Do you need a great new logo?

If you need a logo for your company or product you can get it done with us.
In our logo store you can pick from over 28,000 pre-made logos that will be customized to your name for free or you can post a contest for us for just $250 and our designers from all over the world will submit dozens of logo design suggestions to your specific needs.

Marketplace