Step 1: Go to maps.google.com and type an address (street address, city and state) into the search bar near the top of the page, click on the little magnifying glass icon.

Step 2: Near the top of the left pane you will see a printer icon and a link icon. Click on the link icon.

Step 3: Click inside the text box with the <iframe width... text and it turns blue.  Right click and copy that information.

Step 4: Insert that code into your web page at an appropriate spot.

You can modify the iframe in a few ways. Say you don't want the location icon in the center, you want to zoom in or out a bit or you don't want the address balloon to show up.

Method 1: Right there at Google maps you can go through the above steps, but instead of copying the code they provide by default, click on Cusomize and preview embedded map.

  • This brings up another window where you can select preset sizes for your iframe (small, medium, large) or you can customize the size of the iframe by specifying the width and height.
  • If you don't wish to have the location icon in the center, you can pan around with your mouse.
  • Highlight all of the code in the textarea at the bottom and cut and paste that code into your web page.  
  • It will memorize your iframe size and the location of your location icon within the iframe - but unfortunately, at this writing, even if you turn off the address ballon, it will come back on your web page.  So don't click the X at the top of the address balloon at this point, there is a way to remove that later.

Lets look at the code within the <iframe> div that Google provides when you go through the customization steps in Method 1.

<iframe width="700" height="450" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="https://maps.google.com/maps?=q&amp;source=s_q&amp;
hl=en&amp;geocode=&amp;q=8313+F+Street+
Greeley+Colorado&amp;aq=&amp;sll=40.407616,-105.060922&amp;
sspn=0.164435,0.41851&amp;ie=UTF8&amp;hq=&amp;
hnear=8313+W+F+St,+Greeley,+Weld,+Colorado+80631&amp;
t=m&amp;ll=40.44342,-104.814205&amp;
spn=0.029395,0.051413&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>

<br /><small><a href="https://maps.google.com/maps?f=q&amp;
source=embed&amp;hl=en&amp;geocode=&amp;
q=8313+F+Street+Greeley+Colorado&amp;aq=&amp;
sll=40.407616,-105.060922&amp;sspn=0.164435,0.41851&amp;ie=UTF8&amp;hq=&amp;
hnear=8313+W+F+St,+Greeley,+Weld,+Colorado+80631&amp;t=m&amp;
ll=40.44342,-104.814205&amp;spn=0.029395,0.051413&amp;z=14&amp;
iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>

<iframe>

First of all, an iframe is a div that actually places a portion of an outside webpage on your page.  You are actually calling up the Google map from google.  It's like a window to another web page.

width= and height=

The width="425" and height="350" can be modified by hand if you want to make the ifram a little wider or taller or something.

frameborder=

You can turn on a frameborder by setting it to "1", it puts a border on the iframe that make it look slightly indented into the page.

scrolling=

You can add scrollbars if you wish, by changing scrolling="no" to "yes".

marginheight= and marginwidth=

You can change the margins on the iframe with marginheight and marginwidth, i couldn't see a difference when I messed with these settings, maybe you will.

src=

The src info looks daunting - so don't mess with it, unless you know what you are doing.  It contains the address that you typed in at the Google Map page, along with sll= being Latitude and Logitude of the address.  

If you set it up through the Customize and preview at the Google Maps you will see in the code a parameter that says iwloc=A&amp; If you want to turn off the address balloon by default, take out the A but leave the rest.  The address balloon will still come up if the user clicks on the location icon.  If you didn't set it up through the customization at Google Maps, you can't change this as far as I know.

You can change the default zoom factor within the code as well - where the code has z=14&amp.  Change the 14 to the desired zoom factor.  The bigger the number - the closer in you are - and vice versa.

The center of the map is defined by ll=40.470719,-104.791718&amp; (Note:  this is the ll= not the sll=).  If for some reason you want your address icon off center you can mess with these numbers.  Change the numbers slightly after the decimal point and check the results.  It doesn't take much to move the icon completly off your frame.

Within the code you see <br/><small><a href=..... After the <br/> is all for the link for the Google page with the map - and the link saying View Larger Map.  You can remove this if you don't want them to link to the Google map offsite or you can change the wording to be more explanitory.