Buonasera, in rete ho trovato questo codice che vorrei aggiungere ed ampliare sulla mia pagina.
entrambi da soli funzionano correttamente ma quando li metto nella stessa pagina (adattando l'uno all'altro) la pagina è completamente bianca e non mostra nessun errore.
il codice della mia pagina (depurato del php che preleva le informazioni necessarie dal database) è:
mentre il codice che vorrei adattare e inserire è questo:Codice PHP:.......
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.SATELLITE,
center: new google.maps.LatLng(<?php echo $latitudine; ?>, <?php echo $longitudine; ?>),
zoom: 15
});
var infoWindow = new google.maps.InfoWindow;
........
var pathCoords_red = [
........
{lat:<?php echo $latitudine_1; ?>, lng:<?php echo $longitudine_1; ?>},
{lat:<?php echo $latitudine_2; ?>, lng:<?php echo $longitudine_2; ?>},
........
];
var path_red = new google.maps.Polyline({
path: pathCoords_red,
geodesic: true,
strokeColor: 'red',
strokeOpacity: 1.0,
strokeWeight: 2
});
path_red.setMap(map);
........
// Change this depending on the name of your PHP or XML file
downloadUrl('ge_lista_punti.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var type = markerElem.getAttribute('type');
var x = markerElem.getAttribute('x');
var y = markerElem.getAttribute('y');
var z = markerElem.getAttribute('z');
var latit = markerElem.getAttribute('lat');
var long = markerElem.getAttribute('lng');
var quota = markerElem.getAttribute('quota');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
var text = document.createElement('text');
text.textContent = 'X: ' + x;
infowincontent.appendChild(document.createElement('hr'));
infowincontent.appendChild(text);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = 'Y: ' + y;
infowincontent.appendChild(text);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = 'Z: ' + z;
infowincontent.appendChild(text);
infowincontent.appendChild(document.createElement('hr'));
var text = document.createElement('text');
var latit = Math.round(latit*Math.pow(10,5))/Math.pow(10,5);
text.textContent = 'Lat: ' + latit;
infowincontent.appendChild(text);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
var long = Math.round(long*Math.pow(10,5))/Math.pow(10,5);
text.textContent = 'Long: ' + long;
infowincontent.appendChild(text);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = 'Quota: ' + quota;
infowincontent.appendChild(text);
var customLabel = {
PF: {
//label: 'PF'
},
P: {
//label: name
}
};
//var icon = customLabel[type] || {};
var mioLogo = new google.maps.MarkerImage('/img/green-dot.png',
new google.maps.Size(32,32),
new google.maps.Point(0,0)
);
var marker = new google.maps.Marker({
map: map,
position: point,
//label: icon.label,
icon: mioLogo
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
</script>
........
Al codice della mia pagina vorrei aggiungere nello sfondo in trasparenza la mappa WMS del Catasto offerta dall'Agenzia delle Entrate.Codice PHP:<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Catasto</title>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=""&libraries=drawing"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.2/proj4-src.min.js"></script>
<style type="text/css">
#map, html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
proj4.defs("WGS84", "+proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees");
proj4.defs("EPSG:6706", "+proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs");
var map;
var centro_italia= new google.maps.LatLng(42.30,12.80);
var catOptions = {
getTileUrl: function(coord, zoom) {
return "https://wms.cartografia.agenziaentrate.gov.it/inspire/wms/ows01.php?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&BBOX="+bbox(coord.x,coord.y,zoom)+"&CRS=EPSG:6706&WIDTH=256&HEIGHT=256&LAYERS=province,CP.CadastralZoning,acque,CP.CadastralParcel,fabbricati,codice_plla,simbolo_graffa&STYLES=default&FORMAT=image/png&DPI=96&MAP_RESOLUTION=96&FORMAT_OPTIONS=dpi:96&TRANSPARENT=TRUE"
},
tileSize: new google.maps.Size(256, 256),
name: "Catasto",
opacity: 0.7
};
var catMapType = new google.maps.ImageMapType(catOptions);
function initialize () {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: centro_italia,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: false,
zoomControl: true
});
map.overlayMapTypes.insertAt(0, catMapType);
}
google.maps.event.addDomListener(window, 'load', initialize);
function bbox(x,y,z) {
bl_lng=tile2long(x,z);
tr_lng=tile2long((x+1),z);
bl_lat=tile2lat(y+1,z);
tr_lat=tile2lat((y),z);
bl=proj4("WGS84","EPSG:6706",[bl_lng,bl_lat]);
tr=proj4("WGS84","EPSG:6706",[tr_lng,tr_lat]);
return bl[1]+","+bl[0]+","+tr[1]+","+tr[0];
}
function tile2long(x,z) {
return (x/Math.pow(2,z)*360-180);
}
function tile2lat(y,z) {
var n=Math.PI-2*Math.PI*y/Math.pow(2,z);
return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n))));
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
