Google Map sizing

[gooner67]

Hi

I have added map links to my images, but the maps always open in portrait rather than landscape, and I can't seem to change their size. I want them to open as landscape and be 800x600, but nothing I do in the settings seems to help.

You can see what I mean by clicking on the map icon in the images on this page

https://alan-morris.es/photos/travel/es ... h/hobbiton

Can someone post an image showing the settings in the correct positions for me?

Thanks in Advance.

[gooner67]

I have noticed that the maps are never centred on the GPS location or pin, and have to be dragged to the correct position. I have had help fixing other problems, and this seems to be the only one I have at the moment. Any ideas?

[Benno]

Hi,
did you also check this issues with OpenStreetMap?
Because I don't have problems of this kind with OSM:
See: https://www.reisefotografien.eu/reisefo ... ypten-2024


Kind regards,
Benno

[christine]

Hi,

Add the code to your template.css or, better, if you have one: to a user.css or custom.css file.
This will work temporarily on your site:

Code: Select all

#pgCategoryModalIframe, .modal iframe  {
width: 100%;  
}

Kind regards,
Christine

[gooner67]

Hi,
did you also check this issues with OpenStreetMap?
Because I don't have problems of this kind with OSM:
See: https://www.reisefotografien.eu/reisefo ... ypten-2024


Kind regards,
Benno

Im not using OpenStreetMaps because I can't work out how to get an API key from the website, and the Google maps works fine in the GeoTagging map at the bottom of each category, as you can see here https://alan-morris.es/photos/travel/es ... arbourtour it is only when I click on a photo map icon that the map opens incorrectly. The map box opens full size but the map is a narrow strip and always to the left of the pinned place.

[gooner67]

Hi,

Add the code to your template.css or, better, if you have one: to a user.css or custom.css file.
This will work temporarily on your site:

Code: Select all

#pgCategoryModalIframe, .modal iframe  {
width: 100%;  
}

Kind regards,
Christine

Thanks Christine but it didnt make a difference. The map that is wrong is the one you get by click on the map icon on an individual photo, the category (geotagging) map at the bottom of the screen on a category is correct.

[Benno]

Hi,

Im not using OpenStreetMaps because I can't work out how to get an API key from the website

You don't need any API key to display standard OSM maps, nor do you need to register at www.openstreetmap.org

Kind regards,
Benno

[christine]

Hi,

Add the code to your template.css or, better, if you have one: to a user.css or custom.css file.
This will work temporarily on your site:

Code: Select all

#pgCategoryModalIframe, .modal iframe  {
width: 100%;  
}

Kind regards,
Christine

Thanks Christine but it didnt make a difference. The map that is wrong is the one you get by click on the map icon on an individual photo, the category (geotagging) map at the bottom of the screen on a category is correct.

Which "map icon" do you mean? My way was:

https://imgur.com/a/cJR8HCS
https://imgur.com/a/C3jZIim
after the Code: https://imgur.com/a/hbQOJ3Y

Kind regards,
Christine

[gooner67]

Hi Christine

I have attached two screenshots the first shows the icon (circled in yellow) the second shows the problem im having with the map size for this popout map.

https://imgur.com/a/frKjBre

The version im using is 6 but if i remember i got it early to get around another problem and have been unable to contactthe author since.

Thanks again.

[christine]

Hi,

Try the code shown above again. It works temporarily. See again:
https://imgur.com/a/hbQOJ3Y

For CSS changes, you first need to create a custom.css file. Information here:
https://www.joomshaper.com/documentatio ... ss-js-meta

See on above link, the second screenshot there > Custom CSS (Area): Custom Code and Custom CSS, where you enter the code.

Kind regards,
Christine