Cari amici
avrei la necessità di integrare una mappa google all'interno di un modulo. Ho una mappa realizzata da zero con personalizzazione grafica e markers personalizzati. Ovviamente se copio il codice all'interno del modulo non mi vede nulla. Qualcuno sa darmi qualche indicazione.
Ecco a voi la mappa di google maps:
<!DOCTYPE html>
<head>
<title>SERI MAP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0"/>
<style type="text/css">
html{height:100%;} body{height:100%;margin:0px; padding:0px;} #map_canvas{height:100%;width:100%;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var regoleNuovoStile = [
{
"featureType": "water",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.country",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.province",
"stylers": [
{ "visibility": "off" }
]
},{
},{
"featureType": "road",
"stylers": [
{ "visibility": "off" }
]
},{
}
];
function initialize() {
var coordinate = new google.maps.LatLng(45.5014, 9.33047);
var coordinate2 = new google.maps.LatLng(48.463689, 11.188141);
var coordinate3 = new google.maps.LatLng(42.463689, 10.188141);
var opzioni = {
center: coordinate,
zoom: 4,
mapTypeId: 'nuovoStileID',
zoomControl: false,
disableDoubleClickZoom: true,
mapTypeControl: false,
scaleControl: false,
scrollwheel: false,
streetViewControl: false,
draggable : true,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
mappa = new google.maps.Map(document.getElementById("map_canvas"), opzioni);
var opzioniNuovoStile = {
name: "Nuovo stile"
};
var nuovoStileMapType = new google.maps.StyledMapType(
regoleNuovoStile, opzioniNuovoStile);
mappa.mapTypes.set('nuovoStileID', nuovoStileMapType);
mappa.setMapTypeId('nuovoStileID');
//mappa con maker1
var aziendacoes = new google.maps.Marker({
position: coordinate,
title: "Coes Company",
icon: 'http://serispa.eu/images/logosmall/coeslogo.png',
});
aziendacoes.setMap(mappa);
var contenutocoes = '<div class="popup">'+
'<h2 id="coes">COES</h2>'+
'<p>Pioltello (MI)</b><br/>'+
'<small>Via Caduti del Lavoro</small></p>'+
'<a target="_blank" href="http://www.coescompany.com">'+
'Wiev the website »</a> '+
'<>';
var coes = new google.maps.InfoWindow({
content: contenutocoes,
maxWidth: 430,
maxHeight: 300,
});
google.maps.event.addListener(aziendacoes, 'click', function() {
coes.open(mappa, aziendacoes);
});
//mappa con maker2
var aziendavitrex = new google.maps.Marker({
position: coordinate2,
title: "VITREX",
icon: 'http://serispa.eu/images/logosmall/vitrexlogo.png',
});
aziendavitrex.setMap(mappa);
var contenutovitrex = '<div class="popup">'+
'<h2 id="vitrex">VITREX</h2>'+
'<p>Cambiago (MI)</b><br/>'+
'<small>Viale delle Industrie</small></p>'+
'<a target="_blank" href="http://www.vitrexspa.eu/Italiano/">'+
'Wiev the website »</a> '+
'<>';
var vitrex = new google.maps.InfoWindow({
content: contenutovitrex,
maxWidth: 430,
maxHeight: 300,
});
google.maps.event.addListener(aziendavitrex, 'click', function() {
vitrex.open(mappa, aziendavitrex);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas">
<>
</body>
</html>
