Support thread for JcM footer Open Street Map V1.2 Phoenix

[♥JcMagpie]

JcM footer Open Street Map V1.2 Phoenix

A simple add-on that allows you to place a Open Street Map into the footer. It’s a simple no core change add-on so just copy files over go to admin and install and set up.

Do you have a bricks and mortar store?

Tell your customers about it on your website add a map with details about your store to your website. How? It's simple and free, takes a few minutes to do. Simply go to https://www.openstreetmap.org

The easiest way is to use the 'sharing' sidebar on the right on the main osm.org site, there choose embeddable HTML.

To make it responsive change width to 100%

Now add the script in the language file replacing the one already in it.

That’s it enjoy.

Has been tested on Phoenix 1.0.3.0 only.

Can be seen working on this test site

[Fredi]

I installed your add-on. Works good!
I tried 2 changes:

1. Resize the map to display the entire width of the monitor:

define('MODULE_CONTENT_FOOTER_JCM_OPEN_STREET_MAP_SCRIPT', '<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=34.586248397827156%2C31.664166607007335%2C34.588286876678474%2C31.66545189009921&amp;layer=mapnik&amp;marker=31.6648092507761%2C34.58726763725281" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=31.66481&amp;mlon=34.58727#map=19/31.66481/34.58727&amp;layers=N">View Larger Map</a></small>');

2. Replacing a script with a script from Google Maps:

define('MODULE_CONTENT_FOOTER_JCM_OPEN_STREET_MAP_SCRIPT', '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1965.444472431891!2d34.58641959075949!3d31.664952233940078!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x15029c71c154af2b%3A0x76bc8bd753d9da43!2sAgrosheriff%20Ltd.!5e1!3m2!1sen!2sil!4v1576191088661!5m2!1sen!2sil" width="100%" height="350" frameborder="0" style="border:0;" allowfullscreen=""></iframe>');

[♥JcMagpie]

Full width should only require you to set the module width to 12 in admin.

[Fredi]

On 13.12.2019 at 09:26, JcMagpie said:

Full width should only require you to set the module width to 12 in admin.

I tried to do this, but I couldn’t deploy it to the full width. so I tried setting the width = 100% and it worked.

iframe width="100%" height="350"

I think the reason is the hard-coded frame size in pixels.
For mobile devices, this is adequate, but for a large screen on a computer, the full-width frame does not open with a solid frame size.

[♥JcMagpie]

On 11/13/2019 at 1:37 PM, JcMagpie said:

The easiest way is to use the 'sharing' sidebar on the right on the main osm.org site, there choose embeddable HTML.

To make it responsive change width to 100%

😊 This is made clear in the instructions neither Google maps or Openstreet maps iframes are responsive by default you have to make them responsive by setting width to 100%.

[Fredi]

Thank You Zahid!

Next time I will read the instructions ...