Google Maps
By 
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&ll=53.020902,18.636546&spn=0.018561,0.05579&t=h&z=15&output=embed&s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw"></iframe><br /><small><a href="http://maps.google.pl/?ie=UTF8&ll=53.020902,18.636546&spn=0.018561,0.05579&t=h&z=15&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&hl=en&t=p&om=1&s=AARTsJrhoVfmTsOO8HkyJpKUUcfcb9at9Q&
msa=0&msid=112114991701558823878.00044037cef24ff719d87&ll=42.228517,-9.140625&spn=19.50624,26.367188&
z=4&output=embed"></iframe>
[[/embed]]
[[/div]]
In action
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&source=embed&hl=en&geocode=&q=65+woodhouse+drive+ambarvale&sll=-34.063931,150.758655&sspn=0.008141,0.019312&ie=UTF8&t=h&ll=-34.077616,150.804176&spn=0.054386,0.063515&z=14&iwloc=addr&output=embed&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&ie=UTF8&msa=0&msid=100685272538302717572.00046f39b9745fec203a9&ll=50.212064,-5.092163&spn=1.462399,3.499146&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
Rate this solution
If you think this solution is useful — rate it up! Or dump it otherwise.
page_revision: 12, last_edited: 1248269097|%e %b %Y, %H:%M %Z (%O ago)
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, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
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
wikYacht the yachting world wiki
Thanks for the info, it makes something clear !
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
… 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.
wikYacht the yachting world wiki
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.
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.
wikYacht the yachting world wiki
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..
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.
wikYacht the yachting world wiki
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!
ok, then try with this:
At this point google should definitely recognized the map as created by you
wikYacht the yachting world wiki
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!
Does anyone use the googlemaps api key so that the embed is the html? Does wikidot support this?
thanks!
thank you! your solution actually works!
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
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?
sorry - maybe it's not obvious, here's what the original page should look http://wiki.funontrails.com/ganaraska
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…
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?
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!
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.
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, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
My code is this one:
It is a private map, but as far as I know you do not need a password to be able to watch the map.
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, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
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&hl=en&msa=0&msid=106834310040442095266.0004658f85e258cb011b4&ll=19.569495,-99.118996&spn=0.161745,0.205994&z=12&output=embed
Why exactly this hapens i don't know.
sorry - my mistake, see resolution in a thread below
here's a sample on my wiki: http://funontrails.wikidot.com/ - you can find lots. the source is:
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.
I can't get my map to embed either asnd get the same message as Lobo_Gris.
Coding given by GoogleMaps is:
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, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
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&ie=UTF8&msa=0&msid=100685272538302717572.00046f39b9745fec203a9&ll=50.212064,-5.092163&spn=1.462399,3.499146&output=embed
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.
Have changed the code to
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.
fixed it. your problem was using maps.google.co.uk instead of maps.google.com - it works now.
Excellent. Many thanks FunChief. Very much appreciated. Looks great now.