Salve
Tramite poche righe di codice ho implementato la mappa Google come background.
<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" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
// 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: 13, // 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,
title: 'Resort Grazia Terme'
});
}
google.maps.event.addDomListener(window, 'load', showGoogleMaps);
// ]]></script>
Succede però che non è possibile interagire con la stessa a causa di sovrapposizione di alcuni div.
Ho provato a fare qualche modifica al css ma riesco solo a scoprire la parte esterna al container, chiedo se qualcuno ha incontrato lo stesso problema e come lo ha risolto.
In pratica vorrei mantenere sopra alla mappa solo il modulo sinistro ed il riquadro del contenuto, l'header ed il footer non importa se sopra o sotto. Grazie.
hotelgrazia.it/new/dove-siamo.html