Google Maps

By giovanni_lp giovanni_lp

Description

This is an explanation on how to embed a google map in wikidot.

Code

  • go to maps.google.com
  • create a map
  • click on "link to this page"
  • copy the code under "Paste HTML to embed in website" or customize the appearance of embedded map
  • edit your wiki by pasting the code between:
[[embed]] and [[/embed]]

to get this:
[[embed]]
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.pl/?ie=UTF8&amp;ll=53.020902,18.636546&amp;spn=0.018561,0.05579&amp;t=h&amp;z=15&amp;output=embed&amp;s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw"></iframe><br /><small><a href="http://maps.google.pl/?ie=UTF8&amp;ll=53.020902,18.636546&amp;spn=0.018561,0.05579&amp;t=h&amp;z=15&amp;source=embed" style="color:#0000FF;text-align:left">Wyświetl większą mapę</a></small>
[[/embed]]
  • you can modify width, height, frameborder, scrolling,etc as your wish (I modified width from 300px to 100% in this example)
  • you can also change how the map is displayed in the page by wrapping the embed tag in a div, e.g. to display the map on the right-hand side of the page, like this:
[[div style="float:right"]]
[[embed]]
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;t=p&amp;om=1&amp;s=AARTsJrhoVfmTsOO8HkyJpKUUcfcb9at9Q&amp;
msa=0&amp;msid=112114991701558823878.00044037cef24ff719d87&amp;ll=42.228517,-9.140625&amp;spn=19.50624,26.367188&amp;
z=4&amp;output=embed"></iframe>
[[/embed]]
[[/div]]

In action

[フレーム]
Wyświetl większą mapę

Another map in action:

[[embed]]
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com.au/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=65+woodhouse+drive+ambarvale&amp;sll=-34.063931,150.758655&amp;sspn=0.008141,0.019312&amp;ie=UTF8&amp;t=h&amp;ll=-34.077616,150.804176&amp;spn=0.054386,0.063515&amp;z=14&amp;iwloc=addr&amp;output=embed&amp;s=AARTsJp47q89hdxV7KqqkkMC2YIIJxgqJQ"></iframe>
[[/embed]]

gives:

[フレーム]

More Action ro demonstrate:

[[embed]]
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps/ms?hl=en&amp;ie=UTF8&amp;msa=0&amp;msid=100685272538302717572.00046f39b9745fec203a9&amp;ll=50.212064,-5.092163&amp;spn=1.462399,3.499146&amp;output=embed"></iframe>
[[/embed]]

Gives:
[フレーム]

Most important

an advanced use of this solution permit to show on a map a kml url or a rss, geocoded, url:

  • copy the kml or geocoded rss url
  • go to google maps
  • past the url into the google maps search box
  • then get the code as explained before

You can see an easy example here


Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by giovanni_lp


Rate this solution

If you think this solution is useful — rate it up!

rating: +32
Vibracobra23 Vibracobra23 21 Jul 2009 19:09

I can't get my map to embed either asnd get the same message as Lobo_Gris.

Coding given by GoogleMaps is:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps/ms?hl=en&amp;ie=UTF8&amp;msa=0&amp;msid=100685272538302717572.00046f39b9745fec203a9&amp;ll=50.212064,-5.092163&amp;spn=1.462399,3.499146&amp;output=embed"></iframe><br /><small>View <a href="http://maps.google.co.uk/maps/ms?hl=en&amp;ie=UTF8&amp;msa=0&amp;msid=100685272538302717572.00046f39b9745fec203a9&amp;ll=50.212064,-5.092163&amp;spn=1.462399,3.499146&amp;source=embed" style="color:#0000FF;text-align:left">Morgawr Sightings</a> in a larger map</small>

"One does not discover new lands without consenting to lose sight of the shore for a very long time." ~ André Gide

by Vibracobra23 Vibracobra23 , 21 Jul 2009 19:09
Re: too much code after </iframe>
Helmut_pdorf Helmut_pdorf 22 Jul 2009 13:21

You have too much code after the end of the iframe block!
( </iframe>)

Have a look at this page under "More Action to demonstrate"


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 22 Jul 2009 13:21
Re:
FunChief FunChief 23 Jul 2009 21:38

same thing with your URL Chris, I get the same error
{errorText:"Unable to contact server."}

for this url (your src attribute)
http://maps.google.co.uk/maps/ms?hl=en&amp;ie=UTF8&amp;msa=0&amp;msid=100685272538302717572.00046f39b9745fec203a9&amp;ll=50.212064,-5.092163&amp;spn=1.462399,3.499146&amp;output=embed

by FunChief FunChief , 23 Jul 2009 21:38
Re:
FunChief FunChief 23 Jul 2009 21:51

SORRY - that's not it…i get the same for my URL, which works though.

Here's the actual problem. Both of you tried to edit the description of the map, where the link is. Chris inserted "Morgawr…" and Lobo_Gris inserterd some other name. The way you inserted that broke the original link in half.

this in turn broke the regular expressions that the wikidot validates these links (I'm assuming they use that).

anyways, if you fix that link , you should be fine. for instance this works fine (it's one of the two above) - note the a href tag which now looks different.

[[embed]]
<iframe width="600" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=106834310040442095266.0004658f85e258cb011b4&amp;ll=19.569495,-99.118996&amp;spn=0.161745,0.205994&amp;z=12&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=106834310040442095266.0004658f85e258cb011b4&amp;ll=19.569495,-99.118996&amp;spn=0.161745,0.205994&amp;z=12&amp;source=embed" style="color:#0000FF;text-align:left">View Nuevo Depa in a larger map</a></small>
[[/embed]]
Last edited on 23 Jul 2009 21:53 by FunChief
by FunChief FunChief , 23 Jul 2009 21:51
Re:
Vibracobra23 Vibracobra23 28 Jul 2009 18:47

Have changed the code to

<iframe width="600" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps/ms?hl=en&amp;ie=UTF8&amp;msa=0&amp;msid=100685272538302717572.00046f39b9745fec203a9&amp;ll=50.212064,-5.092163&amp;spn=1.462399,3.499146&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps/ms?hl=en&amp;ie=UTF8&amp;msa=0&amp;msid=100685272538302717572.00046f39b9745fec203a9&amp;ll=50.212064,-5.092163&amp;spn=1.462399,3.499146&amp;source=embed" style="color:#0000FF;text-align:left">View the Morgawr Sightings in a larger map</a></small>

but still says 'no match for embedded code'. As far as I can tell GoogleMaps must have generated the break in the first place.

The coding is on the page at http://fortean.wikidot.com/morgawr#toc1 if anybody wants to help trying to fix it. The page is open edit.


"One does not discover new lands without consenting to lose sight of the shore for a very long time." ~ André Gide

by Vibracobra23 Vibracobra23 , 28 Jul 2009 18:47
Re:
FunChief FunChief 28 Jul 2009 20:42

fixed it. your problem was using maps.google.co.uk instead of maps.google.com - it works now.

by FunChief FunChief , 28 Jul 2009 20:42
Re:
Vibracobra23 Vibracobra23 28 Jul 2009 21:13

Excellent. Many thanks FunChief. Very much appreciated. Looks great now.


"One does not discover new lands without consenting to lose sight of the shore for a very long time." ~ André Gide

by Vibracobra23 Vibracobra23 , 28 Jul 2009 21:13
FunChief FunChief 15 Jul 2009 15:21

here's a sample on my wiki: http://funontrails.wikidot.com/ - you can find lots. the source is:

[[embed]]
<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ca/maps/ms?ie=UTF8&amp;hl=en&amp;t=h&amp;s=AARTsJodj5ONUfeZrNWbomtKeE-2HEIIQg&amp;msa=0&amp;msid=111829477481089314024.0004607b9ead6c6241116&amp;ll=44.016521,-79.491577&amp;spn=1.896163,3.515625&amp;z=7&amp;output=embed"></iframe><br /><small><a href="http://maps.google.ca/maps/ms?ie=UTF8&amp;hl=en&amp;t=h&amp;msa=0&amp;msid=111829477481089314024.0004607b9ead6c6241116&amp;ll=44.016521,-79.491577&amp;spn=1.896163,3.515625&amp;z=7&amp;source=embed" style="color:#0000FF;text-align:left">.</a></small>
[[/embed]]

please compare this with what you get from google. make sure you click on the "Customize and preview embedded map" to get a nice map.

as for the other issue, seeing the map in google maps: make sure you login with the same user all the time and you check any "stay logged in" boxes. i suggest you try this with a public map first and when it works start playing with the private maps.

hope this helps.

by FunChief FunChief , 15 Jul 2009 15:21
FunChief FunChief 13 Jul 2009 19:49

no - i don't think it should…but if it's private, it would only be seen if you shared it with someone that was logged into google via a cookie or something, no? Check your code very carefuly against the examples above. It can produce that error message if you even change one character in a comment!

by FunChief FunChief , 13 Jul 2009 19:49
Re:
Lobo_Gris Lobo_Gris 14 Jul 2009 16:09

I did not change a single character. I was very careful with that, and I tried many many times.

The thing is I am unable to see the map myself, even while logged in at google.

by Lobo_Gris Lobo_Gris , 14 Jul 2009 16:09
Re:
Helmut_pdorf Helmut_pdorf 14 Jul 2009 16:33

Can you insert here under "code" block the requested code of google ?

could be you need a private / secret password to embed this?


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 14 Jul 2009 16:33
Re:
Lobo_Gris Lobo_Gris 20 Jul 2009 00:13

My code is this one:

[[embed]]
<iframe width="600" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=106834310040442095266.0004658f85e258cb011b4&amp;ll=19.569495,-99.118996&amp;spn=0.161745,0.205994&amp;z=12&amp;output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=106834310040442095266.0004658f85e258cb011b4&amp;ll=19.569495,-99.118996&amp;spn=0.161745,0.205994&amp;z=12&amp;source=embed" style="color:#0000FF;text-align:left">Nuevo Depa</a> in a larger map</small>
[[/embed]]

It is a private map, but as far as I know you do not need a password to be able to watch the map.

by Lobo_Gris Lobo_Gris , 20 Jul 2009 00:13
Re: too much ciode after the iframe - end
Helmut_pdorf Helmut_pdorf 22 Jul 2009 13:23

You have too much code after the end of the iframe block!
( </iframe>)

Have a look at this page under "More Action to demonstrate"
(it is not your code)


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 22 Jul 2009 13:23
Re: too much ciode after the iframe - end
FunChief FunChief 23 Jul 2009 21:36

When i try your map (the src attribute of the iframe) I get some sort of an error: {errorText:"Unable to contact server."}. just paste your URL into the browser, for instance: http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=106834310040442095266.0004658f85e258cb011b4&amp;ll=19.569495,-99.118996&amp;spn=0.161745,0.205994&amp;z=12&amp;output=embed

Why exactly this hapens i don't know.

by FunChief FunChief , 23 Jul 2009 21:36
Re: too much ciode after the iframe - end
FunChief FunChief 23 Jul 2009 21:54

sorry - my mistake, see resolution in a thread below

by FunChief FunChief , 23 Jul 2009 21:54
My map doesn't embed
Lobo_Gris Lobo_Gris 13 Jul 2009 17:37

I'm trying to embed a map, but it isn't working. I get a "Sorry, no match for the embedded content." notice.

My map is set on "private". Does it have something to do with it?

by Lobo_Gris Lobo_Gris , 13 Jul 2009 17:37
Too slow
FunChief FunChief 06 Feb 2009 03:23

i embedded a map in may page but it's awfully slow on certain connections. I have profiled with firefox and it's a humongous number of litle pics in layers that it is grabbing.

i figure the solution is to embed a small static JPG of the map and when you click on it, just then actually load and replace with a map - but i couldn't get wikidot to embed such an iframe - i tried with a local attached html file which contains the <img> but it doesn't work

http://wiki.funontrails.com/ganaraska2

really what i'm looking for is like an "alt" attribute for the [[embed or <iframe tags…

any ideas?

by FunChief FunChief , 06 Feb 2009 03:23
Re: Too slow
FunChief FunChief 06 Feb 2009 03:26

sorry - maybe it's not obvious, here's what the original page should look http://wiki.funontrails.com/ganaraska

by FunChief FunChief , 06 Feb 2009 03:26
Re: Too slow
FunChief FunChief 06 Feb 2009 17:53

i've got it - with some help from this thread: http://community.wikidot.com/forum/t-96421/super-sexy-interactive-google-map

you can check the same page to see how…until i delete it that is…basically the html with the <a href="maps.google….."><img…/></a> is as code in a separate topic (i figure it could be the same) and it is included as an iframe in the original topic.

in essesnce, it displays the img and when you click on it, it gets replaced by the actual map…it is NOTICEABLY faster to load…

by FunChief FunChief , 06 Feb 2009 17:53
How to embed maps from Google China?
Wenfang Wu Wenfang Wu 28 Jan 2009 05:07

Hi, everyone,

I tried to make a bilingual website that would contain both an English and a Chinese version of some Google maps. However, while the English version shows well in wikidot, the Chinese version (from http://ditu.google.com/maps) cannot be embedded in wikidot's webpages. After copying and pasting the link of the map from Google China to wikidot, it says "Sorry, no match for the embedded content". Are there any solutions to this problem or are the two just incompatible (BTW I tried pasting the same codes to blogger.com and it works!)?

Many thanks for your advice!

WF

Last edited on 28 Jan 2009 05:12 by Wenfang Wu
by Wenfang Wu Wenfang Wu , 28 Jan 2009 05:07
glitchpop glitchpop 13 May 2008 05:30

thank you! your solution actually works!

by glitchpop glitchpop , 13 May 2008 05:30
Using Googlemaps API key
preserveguide preserveguide 28 Jan 2008 14:41

Does anyone use the googlemaps api key so that the embed is the html? Does wikidot support this?
thanks!

by preserveguide preserveguide , 28 Jan 2008 14:41
Include kml
Struve Struve 06 Dec 2007 10:24

Do you know anything about changing the appearance of the placemarks when including a kml?
In Google Earth I have saved them as red small dots. After transferring through Google Maps to my page, they resulted as dots (at least) but in default-white.

by Struve Struve , 06 Dec 2007 10:24
Re: Include kml
(account deleted) 06 Dec 2007 11:32

I posted the same question on google maps group just a few days ago but never received any kind of answer.
The only work around I found is to save the generated map in "my maps" and then editing one by one the placemarks appearance. Obviosly this is not an esay job on map like mine and the one I've seen on your wiki, with hundred of placemarks.
I never generated a map with a kml from google earth (I only tried with kml files from a gps), but what you can try to do is to import the placemark icon in google map before importing the kml, possible with the same file name it has in google earth. No idea if this works, it's only a suggest.


- Randagio

by (account deleted), 06 Dec 2007 11:32
Re: Include kml
Struve Struve 06 Dec 2007 15:27

How can you edit the placemarks in mymaps? I cannot change anything. I found a post in the "how to" section about a "edit button", but I don't have anything like that..
And how do you import placemark icons? It only accepts kml-url's..

by Struve Struve , 06 Dec 2007 15:27
Re: Include kml
(account deleted) 06 Dec 2007 22:21
  • you need a google account (any account created with google service it's fine: gmail, picasa, google docs, etc)
  • login in google
  • go to maps.google.com
  • click on "my maps" on the left just below the google map logo
  • past the kml link in the searchbox
  • when your kml file is displayed on the map, click on "save in my map" (at the top of the left sidebar, just belove the previous mentioned "my maps" link)
  • now you should have the new map listed on the left side bar
  • if the map is not selected, select it.
  • now you should see an "edit" option just below the list of your maps (I suppose you will have only the new one just created) and just before the list of all the placemarks of the map
  • after clicking on "edit", every time you select a placemarks (from the list or from the map) you will see a windows where you can modify text end appearance of each placemark.

At this point should be quite easy to find where to change the icons and where to upload new one.
As I wrote in the previous post, you can't edit placemarks in bulk, but you have to editing one by one.
Hope everything was clear. All the words I put between "" are translate by me looking at my italian version, so maybe instead of "edit" you should find "modify" and so on.
Let me know if you find problems

PS: I forgot to mention that I'm not sure you need a google account or you can do the same even without login, but if you want to save the map for future editing, an account is much better.


- Randagio

Last edited on 06 Dec 2007 22:52 by (account deleted)
by (account deleted), 06 Dec 2007 22:21
Re: Include kml
Struve Struve 07 Dec 2007 08:48

thank you for this detailed description.
it works all fine unto the edit-button. i don't have it.
what seems to be the problem ist that over my mymap-list, the title says "created by others" and therefore I am not allowed to edit. because I tried to create a new map and with this one the edit-button appeared.
well, I'll search on in the google map group. I'll tell you when I find some answers..
thanks for your help!

Last edited on 07 Dec 2007 08:56 by Struve
by Struve Struve , 07 Dec 2007 08:48
Re: Include kml
(account deleted) 07 Dec 2007 13:45

ok, then try with this:

  • save the kml file on your pc
  • go to my map
  • click on "create new map" (top left corner of the leftsidebar)
  • click on "import" (should appear just below the list of your maps)
  • choose your kml file in the new window

At this point google should definitely recognized the map as created by you


- Randagio

Last edited on 07 Dec 2007 13:46 by (account deleted)
by (account deleted), 07 Dec 2007 13:45
Re: Include kml
Struve Struve 10 Dec 2007 08:24

right, thanks! I didn't see this option.
unfortunately it doesn't work as it says "We could not finish uploading your file.". I don't think it's the size of the file as I also tried it with only one point. but is it possible that my firewall blocks it from uploading??

Edit: just seen on a german forum that the first line (upload from computer) doesn't seem to work at the moment, only the second line wit the url. worked fine.

thank you for your great help anyway!

Last edited on 10 Dec 2007 10:16 by Struve
by Struve Struve , 10 Dec 2007 08:24
Helmut_pdorf Helmut_pdorf 02 Dec 2007 12:44

Because of you wpnder:
is it not the same as in http://snippets.wikidot.com/code:quikmaps-maps ?

But always better to have it spread over more pages…


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 02 Dec 2007 12:45 by Helmut_pdorf
by Helmut_pdorf Helmut_pdorf , 02 Dec 2007 12:44
Re:
(account deleted) 03 Dec 2007 22:04

It's not the same. Quickmaps has only a few of the futures offered by google map. On quickmap you can't upload kml files, connect to geocoded rss and so on, but you can only drow on a map and place icons.
At least this is what I've seen after a fast browse in quickmaps website
To place all the marks you can see here can take you a full day in quickmaps, in google maps is simple as copy and past an url in the search bar


- Randagio

Last edited on 05 Dec 2007 12:42 by (account deleted)
by (account deleted), 03 Dec 2007 22:04
Re:
Helmut_pdorf Helmut_pdorf 04 Dec 2007 08:33

Thanks for the info, it makes something clear !


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 04 Dec 2007 08:33
Re:
(account deleted) 05 Dec 2007 12:45

… But you are right, I'll modify the page to explain this a bit better. In a first time I fought this was note necessary as wasn't concerning codeing in wikidot, but something in google maps.


- Randagio

by (account deleted), 05 Dec 2007 12:45
page revision: 13, last edited: 16 Feb 2012 01:05
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License
Click here to edit contents of this page.
Click here to toggle editing of individual sections of the page (if possible). Watch headings for an "edit" link when available.
Append content without editing the whole page source.
Check out how this page has evolved in the past.
If you want to discuss contents of this page - this is the easiest way to do it.
View and manage file attachments for this page.
A few useful tools to manage this Site.
Change the name (also URL address, possibly the category) of the page.
View wiki source for this page without editing.
View/set parent page (used for creating breadcrumbs and structured layout).

AltStyle によって変換されたページ (->オリジナル) /