Ho una pagina con una mappa di Google Maps con tanto di traccia GPS e alcuni markers, cliccando sui quali appare una piccola finestra con una piccola immagine. La funzione responsabile di ciò è la seguente :
codice:
function createMarker(point, sorg, icon, nom) {
var marker = new google.maps.Marker({
map : map,
title : nom,
icon : icon,
position : point
});
var contentString = "<div id='content'><img src='" + sorg + "' height='320'></div><div id='ore' align='center'>"+nom+"</div>";
contentString = contentString + "<div align='center'><a href='" + sorg + "' target='_blank'>[formato 1:1]</a>";
var infowindow = new google.maps.InfoWindow({
content: contentString
});
Premetto che ho constatato che alcuni smarthone, sempre impugnati verticalmente, ruotano di 90 gradi le fotografie, non so perchè. E' un dato di fatto.
Un'immagine larga 1080 px e alta 1920 px, ripresa con uno smartphone (sempre in posizione verticale), viene visualizzata nella mia pagina correttamente (180x320 pixel).
Fino a qui tutto OK.
Un'altra immagine (stessa risoluzione ma larghezza 1920 e altezza 1080), ripresa con un altro smarphone sempre in posizione verticale, viene visualizzata in formato orizzontale (larghezza 560 e altezza 320 pixel) e questo non è accettabile.
Come fare a ruotare, con codice Javascript, di 90 gradi in senso orario le immagini del secondo tipo ?
Non credo sia necessario leggere i dati exif delle immagini (e comunque non saprei come fare).
Penso che una volta capito che l'immagine è del secondo tipo si debba attivare una funzione Javascript che ruoti l'immagine che a quel punto diventa del primo tipo e quindi correttamente visualizzabile (sempre in formato portrait e alta 320 pixel)
Come risolvere quindi il problema ?
Grazie per l'attenzione.