Add a Google Map to your site

To find a service on a website or blog, you can integrate a Google map into the page and possibly add an indication to it.

1) Location

Open the Google Maps website, which displays a map similar to the image on the right. Move the mouse: Press the button and move your hand to move, move the button to zoom in or out.

Several display modes are possible: map or terrain for the whole world, while the street view covers only a few US cities. However, you should try this mode; it's fantastic to have a view of the streets of any city in just a few seconds.

So, select a specific place on the map, where is the service or store that you want to place there. In our example, we find it in Paris on the Champs Elysees.

2) Get the code

As soon as the area is defined with the maximum possible magnification, click on "Get URL." Two fields are displayed in the dialog box. In the second field is the HTML code, and at the bottom is the text: "Configure and view the built-in map."
Click this link to display the configuration panel.
Then we can recover the code by selecting it with the mouse and keys and CTRL + V.

<iframe 
width="320" 
height="240" 
frameborder="0" 
scrolling="no" 
marginheight="0" 
marginwidth="0" 
src="http://maps.google.fr/?ie=UTF8&ll=48.867284,2.315369
&spn=0.003098,0.006942&z=17&om=1&layer=c
&output=embed&s=AARTsJqaq7rV0B9cs4JBrvPKbCnu0GGTnA">
</iframe>

3) Add a direction

To do this, you need to create a Google Maps account. Click on the "My Cards" tab, then the "Create Card" button.

You can also simplify the matter by taking a screenshot of the map and adding direction to the image using a drawing program.

4) Use code

The code extracted in this way can be placed anywhere on the web page.

Demonstration:


Enlarge map

Resources

Screen capture software will allow you to take a screenshot of the map (for example, the Windows Capture tool or MWSnap).

The bubble is drawn using the LibreOffice drawing tool and inserted using The Gimp.


Using a Map Feature

With Google Web Elements, adding a map is easier. But the service is discontinued. However, the code below is still working (for now).

Go to Map Elements. Enter your location, your professional website address and post the generated code on your page. For example, with "Paris":


See also