Google Maps

This page shows how to embed Google maps onto your site.

These instructions were taken from this site:
http://google-latlong.blogspot.com/2007/08/youtube-style-embeddable-maps_21.html

Basically all you need to do to get this is to

  1. Go to Google Maps, http://maps.google.com and enter the address for the map you want.
  2. Click on the Link to this page link at the top right of the map.screenshot of link
  3. You will then see a box appear with two bits of HTML code.dialog box to copy html from
  4. Click inside the box that says “Paste HTML to embed in website. The box should highlight all of the code.
  5. Copy the code (Ctrl+C).
  6. Go to your webpage and paste it into the place where you want it to appear. If you are in Dreamweaver make sure that you are in the Code view when you do the pasting.
  7. If you want the map to be different dimensions you can do that.
    1. Click the “Customize and preview embedded map” option in the dialog box you got in step 3.link to customize embed
      You will see a new window. Click on the “Custom” option and then enter a width and height .window to customize embedded map
  8. Google Maps uses iframes to show the map. Essentially an iframe is a way to put another HTML page inside of the current page. While this may seem neat there are some problems with it in terms of accessibility for screen readers and search engines have a hard time with it. Generally iframes should be avoided unless there is a special situation like these maps.
  9. Here are two examples:



View Larger Map

Another Example


View Larger Map

Tweaking the Maps

Sometimes it is hard to get it to be zoomed and centered where you want it. Here are some tricks to get into the code a bit and set the zoom and center yourself.

Centering the Map

  1. First make sure that you copied code from the “customize and preview embedded map option” because that adds the z paramater we will need to modify
  2. Go to the place you want center your map and right click with your mouse. Select “What’s here?”
  3. Go to the address bar and copy the numbers you will see there
  4. Paste the numbers into the ll parameter in the code you copied from the “customize and preview embedded map option”

Setting the Zoom

  1. Again make sure that you copied code from the “customize and preview embedded map option” because that adds the z paramater we will need to modify
  2. find the z parameter in the copied code
  3. Replace it with a number between 1 and 21. 1 shows the whole world and 21 is the closest zoom. Some maps may not allow zoom to 21.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>