Add a Google Map On a Web Page

To locate a service on a Web site or a blog, you can integrate a Google map in a page and possibly add some indication on it.
This is done in four stages.

1) Locate

Enter Google Map, which provides a map as the image to the right. You moves with the mouse: press the button and drag to travel, move the wheel to zoom or go backward.

Various display modes are possible: map or terrain for the world, street view is possible only in a few cities in the United States. You must try this however to have a fabulous view on the streets of any city in a few seconds.

Now select a specific location on the map, the one in which the service or the store you want to place. In our example, it is located in Hollywood.

2) Get the code

Once the area defined with the maximum possible expansion, click on "Link to this page". A dialog box displays two fields. The second is the HTML code and below is this text: "Customize and preview embedded map". Click on this one to define your own parameters.
Then you can retrieve the code by selecting it with the mouse and CTRL+V keys.

<iframe 
width="320" 
height="240" 
frameborder="0" 
scrolling="no" 
marginheight="0" 
marginwidth="0" 
src="http://maps.google.fr/?ie=UTF8&om=1
&s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw
&ll=26.004184,-80.185776
&spn=0.016971,0.027466&z=14
&output=embed""></iframe><br/>
<small>
<a href="http://maps.google.fr/?ie=UTF8&om=1
&ll=26.004184,-80.185776
&spn=0.016971,0.027466
&z=14&source=embed" style="color:#0000FF;text-align:left">
Enlarge the map</a>
</small>

3) Add an indication

To do a note, as the name of the shop or anythong you want to locate, you must create an account on Google Maps. You click on "My Maps", and then on "Create new map."

But this can be also simplified by making a screenshot of the map and adding this indication on the image with some painting software.

4) Use the code

The code can be retrieved and placed anywhere on a Web page.

Demo:

Resources

MWSnap is a screenshot software that will make an image of the map.

The tooltip is drawn with the picture editor of Star Office and pasted with The Gimp.