[SOLVED] Embedding Google Maps

[dulux]

How can i put a embedding google map at cms page like "about us"?

Thanks

[Flash.Arte]

Open CMS, click edit, and press the HTML button.

It will open a little window where you can insert some code.

Go to google maps, and in the right side there is a button with a Chain, click it and select the HTML code and copy it.

Paste it in the little window.

That´s all.

Greetings

[DutchT]

i tried this but is not working, i think because it is a iframe.

some other suggestions?

[dulux]

Yes it seems don´t work, if someone knows....

[Ash Bryant]

I have done this before using web-developer tool bar for FireFox. Seeing as TinyMCE (the text editor in prestashop) is javascript based. I used the toolbar to disable javascript on that admin page, thus turning off TinyMCE. After which it's just a copy and paste of the google code, followed by a save.

Job done. Then turn on javascript with the tool bar again.

[cokenour]

Funny...I didn't even think of that.

Well, that works but presents a different problem. It required that work around any time I edit that particular CMS page. This makes the site less able to be administered by someone other than me (or another designer).

Thanks for the tip. I may use that for now while I look for another option.

[Ash Bryant]

Got asked how you do this. So here you go.

You will need to have FireFox - http://www.mozilla.com/en-US/
and then install Web Developer Toolbar - https://addons.mozilla.org/en-US/firefox/addon/60

Also as a side note Firebug - https://addons.mozilla.org/en-US/firefox/addon/1843 is also a good one to have, but that's another topic.

Once you have those go to the admin page (using FireFox) you need to edit. then you will have to go to... Tools > Web Developer > Disable > Disable Javascript > All Javascript.

Now refresh the page. The Editor will now not load. Put your google maps code in and save.

Once you have done that. turn Javascript back on. Tools > Web Developer > Disable > Disable Javascript > All Javascript.

Then your done.

[DutchT]

Great it works!

Thx Ash

[coalesce]

Is there a way in the cart to disable the WYSIWYG editor without having to use a Firefox addon? WYSIWYG editors are extremely problematic for users trying to actually work with clean code and anything advanced....

[Timothy Jarman]

You can do it within Safari no problem you dont need anything else.

Before you click on the pencil on the 'about us page' (or any cms pencil) go to safri pref's, then click security tab, then deselect the java tabs then click the pencil.

You can now add the html code from google and it will work


remember to reenable the java though

[fablecrab]

thank you so much for the trick with Safari, it works perfectly!

[Timothy Jarman]

its my pleasure to try and help, i am no it guy i am learning myself.

To anyone else who reads this, i found another problem, and that is when you need to add google maps to all translations, but when you disable to the Java you cant select a langguage.

What you must do is in the url at the end you will see id_lang=1, if you need to edit another language while your java is disabled then just change the id_lang=(id of the language you want to change) then there you go


Hope it will help someone.

[rafaxgx]

its my pleasure to try and help, i am no it guy i am learning myself.

To anyone else who reads this, i found another problem, and that is when you need to add google maps to all translations, but when you disable to the Java you cant select a langguage.

What you must do is in the url at the end you will see id_lang=1, if you need to edit another language while your java is disabled then just change the id_lang=(id of the language you want to change) then there you go


Hope it will help someone.

Hi all,
I've tried everything all that you guys said to make an iframe works on Prestashop, but unfortunately I couldn't get it completely. The only thing I get is an iframe of about 150 pixels height (see attachment), width is ok (I can change the size without problems) For example, I need an iframe of 830x650px.

Can anybody tell me what's wrong, please? I'm using PS 1.2.5.
Thanks.

[Paul C]

Some browsers (Safari vertainly used to) don't encapsulate the whole content by default, but require you to specify the size. I ended up using some javascript to resize the iframe after loading to get it to work consistently.

Dynamic drive might have what you need: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

Paul

[rafaxgx]

Some browsers (Safari vertainly used to) don't encapsulate the whole content by default, but require you to specify the size. I ended up using some javascript to resize the iframe after loading to get it to work consistently.

Dynamic drive might have what you need: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

Paul

Thanks for your reply Paul, but as Dynamic Drive says: "*All external pages loaded into the iframe must be from the same domain as the page the iframe tag is inserted in. Setting the iframe's src to an external site such as "http://www.google.com" will not work, since the script cannot probe and detect the height of pages from external domains."

So, in my case, I'm trying to insert an iframe from Google Maps... and it will not work.
Have you got another solution?
Thanks anyway.

[Paul C]

Ah of course, in my case it was. Hmm. Are you setting the size of the iframe? Thinking about it, surely these maps are always a fixed size? Your screenshot is showing the whole google page though rather than just the map. did you use the code provided by google when you click the link symbol at the top right of the map image on the page?

[rafaxgx]

Ah of course, in my case it was. Hmm. Are you setting the size of the iframe? Thinking about it, surely these maps are always a fixed size? Your screenshot is showing the whole google page though rather than just the map. did you use the code provided by google when you click the link symbol at the top right of the map image on the page?

Well, I changed something: instead of "embed" I used "display" (I didn't know about that, and not even remember where I heard about it, I just tried and it worked ). Why? Because using "display" I can "Get directions" and all that.

Yes, first I copied and pasted the code provided by Google... but it didn't work. Then, I changed to the size I need... and didn't work either. And then, I tried with the "display"... but the same problem.

Any other idea? Thanks for your help.

PS: I'm using PS 1.2.5 with MOON template.

[cammo]

I inserted the google maps code into my Contact page quite easily, by pasting the code into the contact-form.tpl under your theme's directory.

I also adjusted the width and height parameters of the iframe code from google to fit my centre column and removed the pop-up bubble from maps that has all the business info in so it is easier to see the map.

Check it out in the signature and click on Contact in the menubar at the top.

The only problem I have is in IE8 on the contact page, I suspect the embedded map is preventing my categories block from loading, but seems to work fine in all other browsers..

[burpitt]

yeah I was just about to suggest the same as cammo, why not just create a new TPL with the code in it, and maybe a new .php to reference the code and give you friendly urls. saves messin about turning java on and off at any rate! just grab the hooks from another php file and edit away!

[hsyong]

Here is the step by step guide.. works for all browsers, and should be easily added to all versions of PrestaShop:
http://www.prestashopthemes.net/add-google-maps-to-prestashop-contact-page.html

[tommyf]

Funny...I didn't even think of that.

 

Well, that works but presents a different problem. It required that work around any time I edit that particular CMS page. This makes the site less able to be administered by someone other than me (or another designer).

 

Thanks for the tip. I may use that for now while I look for another option.

 

Hi!

 

Did you find another solution?

 

thanx

 

Tommy

[tommyf]

Here's a solution to allow Iframe in tinyMCE

 

look for file tiny_mce.js and open it , its somewhere located in root/js...

 

use ctrl-f to find --> script[src|type],

 

and insert right after--> iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder],

 

it would be like this-->

 

script[src|type],iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder],

[Pippo3000]

Got asked how you do this. So here you go.

You will need to have FireFox - http://www.mozilla.com/en-US/

and then install Web Developer Toolbar - https://addons.mozil...irefox/addon/60

Also as a side note Firebug - https://addons.mozil...efox/addon/1843 is also a good one to have, but that's another topic.

Once you have those go to the admin page (using FireFox) you need to edit. then you will have to go to... Tools > Web Developer > Disable > Disable Javascript > All Javascript.

Now refresh the page. The Editor will now not load. Put your google maps code in and save.

Once you have done that. turn Javascript back on. Tools > Web Developer > Disable > Disable Javascript > All Javascript.

Then your done.

 

ash, you made my day. since weeks I am looking for a solution to add iframes. finally. thanks! phil

[svarbus]

Got asked how you do this. So here you go.

You will need to have FireFox - http://www.mozilla.com/en-US/

and then install Web Developer Toolbar - https://addons.mozil...irefox/addon/60

Also as a side note Firebug - https://addons.mozil...efox/addon/1843 is also a good one to have, but that's another topic.

Once you have those go to the admin page (using FireFox) you need to edit. then you will have to go to... Tools > Web Developer > Disable > Disable Javascript > All Javascript.

Now refresh the page. The Editor will now not load. Put your google maps code in and save.

Once you have done that. turn Javascript back on. Tools > Web Developer > Disable > Disable Javascript > All Javascript.

Then your done.

 

Super!!!!!! Thanks!!!

[gokturk]

Hi All, How to add google maps ebmed code v 1.6.x , This tips does not work