google map come background di un modulo

[crema79]

Salve


Versione di Joomla 3.3.x
Avete consigli per come modificare le impostazioni di una posizione del mio template in modo che utilizzi come background una mappa di Google?
In modo che quando creo un modulo html personalizzato e gli assegno questa posizione, mi venga in automatico il background con la mappa di Google.


mi sembra di aver capito come personalizzato nel CSS l'id della posizione in questo modo:

Codice: [Seleziona]


height: 100%;
width: 100%;
position:absolute;
top: 0;
left: 0;
z-index: 0;


ma non capisco come integrare il Javascript che ho reperito necessario al funzionamento:

Codice: [Seleziona]


<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 
<script type="text/javascript">
 
// The latitude and longitude of your business / place
var position = [27.1959739, 78.02423269999997];
 
function showGoogleMaps() {
 
    var latLng = new google.maps.LatLng(position[0], position[1]);
 
    var mapOptions = {
        zoom: 16, // initialize zoom level - the max value is 21
        streetViewControl: false, // hide the yellow Street View pegman
        scaleControl: true, // allow users to zoom the Google Map
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latLng
    };
 
    map = new google.maps.Map(document.getElementById('nome_del_id'),
        mapOptions);
 
    // Show the default red marker at the location
    marker = new google.maps.Marker({
        position: latLng,
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP
    });
}


secondo voi è la procedura corretta?



Grazie
Carlo

[tomtomeight]

Dovrebbe funzionare con qualsiasi posizione tu la assegni, ho fatto una cosa simile con un modulo html ove ho inserito questo codice:

Codice: [Seleziona]

<div id="googlemaps"></div>
<!-- Include the Google Maps API library - required for embedding maps -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

// The latitude and longitude of your business / place
var position = [40.742239,13.890078 ];

function showGoogleMaps() {

var latLng = new google.maps.LatLng(position[0], position[1]);

var mapOptions = {
zoom: 10, // initialize zoom level - the max value is 21
             streetViewControl: false, // hide the yellow Street View pegman
 scaleControl: true, // allow users to zoom the Google Map
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latLng
};

map = new google.maps.Map(document.getElementById('googlemaps'),
mapOptions);

// Show the default red marker at the location
marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: false,
 animation: google.maps.Animation.DROP
 });
}
google.maps.event.addDomListener(window, 'load', showGoogleMaps);
</script>
Poi ho aggiunto queste righe al custom.css

Codice: [Seleziona]

#googlemaps {

height: 100%;

width: 100%;

position:absolute;

top: 0;

left: 0;

z-index: -1;

}
La mappa si vede tuttavia non riesco a renderla interattiva essendo coperta da altri div, eppure in altri siti che ho visto in rete come pure ove ho preso il codice funziona.

Qui ove la stò implementando.

 http://www.hotelgrazia.it/new/dove-siamo.html

[X-mac]

La mappa non è interattiva perché ci sono conflitti JavaScript fai un check più approfondito e vedrai che risolvi

[tomtomeight]

No, non è un conflitto, si tratta di sovrapposizione di div, da firebug riesco solo a scoprire le fasce laterali e lì la mappa funziona.

Il conflitto semmai è dato dall'implementazione del movimento (draggable) del riquadro trasparente (content) ma confligge solo se lo applico nelle altre pagine con lo slide background che non gira più.