Don't miss these Blodger posts!

Friday, 9 May 2014

Embed google maps on your blog or site

There are several useful google map types which can be good for your blog or site. These can range from the Find us simple map, to directions from A to B, or even street views, Photos and Look inside.

The following are selections of the simple types of views you can put on your site by using the Google maps embed option and without resorting to the Google API. BUT note that to get all of these you need to swap between Google map versions as Google have not included some of the old embedding features that were available in the version pre March 2014 Classic version.

Please hold a few seconds whilst they load up properly ...

View Larger Map

View Larger Map

 Ok firstly I'm assuming you are using the new default version (you will see the ? mark, options icon and rotate view in the bottom right hand corner of the screen). When you need to revert back to the Classic version simply press the ? icon and click the link to return to classic version. (You can also do this temporarily for a session - a pop up message wil appear near the top of the screen). Once in Classic Google maps you will be offered a Get new Google maps option boldly on the left hand side of screen if you want to revert back to the new version)

So in the new version use the search bar in the top left hand corner to find what you want a map of. For this exercise we will use the Eiffel tower in France

Type Eiffel Tower in this box as below. You will see that the search box automatically comes up with some options, so click the first one.

Find Eiffel Tower

As below you will be presented with a map of the Eiffel tower and its vicinity.

Found Eiffel tower

Once you have manipulated the map to how you desire, i.e. move in closer or further away, then click on the options icon and you will see a menu appear as below.

Select Option Icon then select Share and emdeb map
This will bring up the Share and Embed dialogue and you need to click on the Embed map link at the top of this dialogue. 

Share and Embed

The embed map link which brings up this page
Embed map
We now have an opportunity to modify the size of the map in this dialogue using the button which by default says Medium at the top left. (we can do this later by altering the embeded code that this dialogue provides. In this screen we can also use the mouse to move in, out and around the map. So leave at default but move your cursor to the text box which currently says iframe src. If you click in this box it will automatically select all this code otherwise use keyboard Control-A or your mouse to select all. Copy this code (Control-C

We then need to go to the place in your site where you want the map to appear. If a new blog post then within the POST editor, click on the HTML button in the top left and paste the code directly in.

For the map above the code is

And if you revert to the Compose button or preview the post you will see the embedded Google map ! Note how these provide a low function Google map which you can use like Google maps from your site. If you click on the map, then the description box will disappear and you will see a view on Google maps link which takes you to the fully functioning Google maps.

So to get other views in new Google maps  click on the Earth box in the bottom left of screen as above. This will convert the map to a satellite view. Take the same steps as above by clicking the Options icon, clicking on Share and Embed map,  clicking  the Embed map link (it may by default be in this view), copy the iframe source code, and paste into an HTML page with result below.

If you want directions to Eiffel tower then type in for example London to Eiffel tower to get the directions view. Use the Embed technique as above and insert into your site like below.

If you hover above the Eiffel tower description box at the top left then this should bring down pictures (like the found Eiffel tower screen shot above) of other Google map features such as See Inside , or Street view or Photos. If you click on one of these, the browser presents these options, but if you press the options icon to embed for all these options the embed is not (yet) available in new Google maps.

Hence you have to revert to Classic Google to get them. See the steps above

Once you are back in Classic Google maps then you will see screen as below.

Click on the highlighted street view icon (yellow human) and drag it to the street from which you want to view.

Streetview in classic Google maps
 In the top left you should be able to see 4 buttons, Get directions, My Places, Print and the handcuff like Link button. Click on the Link button. This will bring out the menu shown above to the right of it and as above copy the iframe code from the Paste HTML text box into your site giving embedded Google map below.

View Larger Map

Using the same technique click on the See(Look) inside human and copy iframe code from the link button text box as per screen below

Look inside view
When you copy in the iframe code to your HTML you will get a See-Look inside map like below which you can look around as if you were in Google maps

View Larger Map

You can change the size of these maps by modifying the width and height properties within the iframe code.

There are a few sites which simplify things slightly

Map creates code for you in an arguably simpler way

Also of interest is Google maps engine beta which again allows you to create maps but add places, direction etc 

Maps engine beta


Blodger Copyright © 2010 LKart Theme is Designed by Lasantha

Downloaded from Free Templates

Modified to LK Magazine v2 Pimp No6 and Copyright © 2013 by Blodger