PDA

View Full Version : Embed a google map of the AT to your blog or website



Rusty Nail
02-16-2012, 07:50
After playing with this for WAY too long, few youtubes and a bit of luck has lead to figure it out. Maybe I can save you guys a few hrs of headache, my way of paying back to a great wealth of information here.

First we need to be able to allow a google map on your site or blog. Google has gadget for that.
http://www.gmodules.com/ig/creator?synd=open&url=http://code.google.com/apis/kml/embed/embedkmlgadget.xml

Now that that is done the part that stopped me in my tracks was figuring out how to get my ggogle earth map published online. After lots of failed ideas I just took the map and loaded it to Google Sites and picked up the link from there. This is a map I found online with all the shelters and descriptions.
https://sites.google.com/site/atnorthbounder/maps/AT w Shelters - Track Collection Filtered 200 Feet.kml?revision=1 (https://sites.google.com/site/atnorthbounder/maps/AT%20w%20Shelters%20-%20Track%20Collection%20Filtered%20200%20Feet.kml? revision=1)

So now its easy, open another browser page and go to the gadget link. Then copy and past the map link into the "my map url" section in the gadget. Adjust the size and border if you want. Then press preview, now press "get the code" and copy it. It should look like this.

" target="_blank"><script src="//www.gmodules.com/ig/ifr?url=http://code.google.com/apis/kml/embed/embedkmlgadget.xml&amp;up_kml_url=https%3A%2F%2Fsites. google.com%2Fsite%2Fatnorthbounder%2Fmaps%2FAT%20w %20Shelters%20-%20Track%20Collection%20Filtered%20200%20Feet.kml% 3Frevision%3D1&amp;up_view_mode=earth&amp;up_earth_2d_fall back=0&amp;up_earth_fly_from_space=1&amp;up_earth_show_nav _controls=1&amp;up_earth_show_buildings=1&amp;up_earth_sho w_terrain=1&amp;up_earth_show_roads=1&amp;up_earth_show_bo rders=1&amp;up_earth_sphere=earth&amp;up_maps_zoom_out=0&amp;u p_maps_default_type=map&amp;synd=open&amp;w=600&amp;h=600&amp;titl e=Interactive+AT+Map&amp;border=%23ffffff|3px%2C1px+so lid+%23999999&amp;output=js"></script> (http://%3Cscript%20src=)


Now go to your site or blog and in the html view paste it in. I have wordpress and it was as simple as pressing the html tab just about the text box ( next to visual)

The result: http://northbounder.com/?page_id=59

Have fun

Rusty Nail
02-16-2012, 07:56
Edit: you do not have to download the map just copy the link. https://sites.google.com/site/atnorthbounder/maps/AT w Shelters - Track Collection Filtered 200 Feet.kml?revision=1 (https://sites.google.com/site/atnorthbounder/maps/AT%20w%20Shelters%20-%20Track%20Collection%20Filtered%20200%20Feet.kml? revision=1)

Rayo
02-16-2012, 10:55
Hey, thanks for sharing this.

YohonPetro
02-16-2012, 11:31
Nice! thanks

Rusty Nail
02-16-2012, 11:47
One more option is to change the title shown above the map. Do this in the gadget tool "title" you can make this whatever you want.