My Spiderweb Logic CMS has had Google Maps integrated into it for a couple years, so I havent had to focus on this for a bit. However, someone just asked me how to integrate Google Maps into their website. This is never a 2 sentence explanation. Here are the basics:
First figure out what you want.
I want GOOGLE MAPS imbedded IN my website:
You will need to use the API to build your map. Reviewing the official documentation will help with "how do I" questions specific to your website.
REF: http://code.google.com/apis/maps/documentation/
1) COPY/Paste code for your website
This is the best method:
http://code.google.com/apis/maps/documentation/#AJAX_Loader
They give you a bunch of javascript. Put it between the head tags.
Don't forget to create a "div" tag in the body with the id of "map" to contain your map.
2) Get a Google API Key for your website (even if it is localhost)
3) Replace the ABCDEFG in the above template with your google key.
4) Find the longitude/latitude of the location you want to center on.
Get longitude and latitude. If you are doing things dynamically both Yahoo and Google provide geocoding apis. But for one-time use, that link is the best.
5) Replace longitude and latitude numbers in the sample code with the actual longitude and latitude for your location.
ref: map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
It should now work.
You can alter the zoom in/out features by changing the 13 to a different number. You can alter the width and height by altering the width/height of the div tag.
You might also find the tutorial helpful here:
tutorial: http://code.google.com/support/bin/answer.py?answer=74725&topic=11364
list of events: http://econym.googlepages.com/gevent.htm
I want to link to a GOOGLE MAP defined with my specific location(s):
This means that your map stays at Google. You just link to it from your website. However, you can configure a map specific to your needs - with your location preferences.
STEPS:
1) Log into your Google account. (Get one if you dont already.)
2) Get to the Google "maps" product
3) Create a new map and set your preferences. Put in a name and description. Dont forget to save.
4) Go back in edit mode and drag markers/balloons to your locations. Save.
NOTE: When you are editing your map you can zoom in to help put in your markers.
5) Get a link to your map. (Click on the "collaborate" link on left to get the URL. Copy/paste the full URL noted to the "href" of a link.) example map
Wednesday, May 6, 2009
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment