Questo script vi permette di creare due marker sulla mappa e di collegarli attraverso una polyline.
All'evento click su marker e polyline, vengono aperte le rispettive infowindow:
<!DOCTYPE html>
<html>
<head>
<title>Navigation functions (heading)</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
height: 80%;
widht: 80%;
padding: 10;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var marker1, marker2;
var poly;
function initMap() {
// inizializzo la mappa
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 34, lng: -40.605}
});
// creo i marker
marker1 = new google.maps.Marker({
map: map,
draggable: false,
position: {lat: 40.714, lng: -74.006}
});
marker2 = new google.maps.Marker({
map: map,
draggable: true,
position: {lat: 48.857, lng: 2.352}
});
// creo la polyline
poly = new google.maps.Polyline({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
map: map,
});
// imposto la posizione del polyline
var path = [marker1.getPosition(), marker2.getPosition()];
poly.setPath(path);
// imposto i contenuti delle infowindows
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Marker 1</h1>'+
'<div id="bodyContent">'+
'<p><b>test Marker 1</b>, ...</b>, ....' +
'fine...</p>'+
'</div>'+
'</div>';
var contentString3 = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<div id="bodyContent">'+
'<p><b>Polyline .....</b>'+
'</div>'+
'</div>';
// imposto le infowindows
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var infowindow2 = new google.maps.InfoWindow({
content: '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Marker 2</h1>'+
'<div id="bodyContent">'+
'<p><b>test Marker 2</b>, ...</b>, .... ' +
'fine...</p>'+
'</div>'+
'</div>'
});
// apro le infowindows al click sui marker
marker1.addListener('click', function() {
infowindow.open(map, marker1);
});
marker2.addListener('click', function() {
infowindow2.open(map, marker2);
});
// apro le infowindows al click sulla polyline
var infowindow3 = new google.maps.InfoWindow();
google.maps.event.addListener(poly, 'click', (function (poly) {
return function (event) {
infowindow3.setContent(contentString3);
infowindow3.setPosition(event.latLng);
infowindow3.open(map);
};
})(poly));
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&callback=initMap"
async defer></script>
</body>
</html>
Commenti