You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
171 lines
4.5 KiB
171 lines
4.5 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Google Map Demo</title>
|
|
<meta name="viewport" content="initial-scale=1.0">
|
|
<meta charset="utf-8">
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#map {
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<script>
|
|
var map;
|
|
var marker1;
|
|
var marker2;
|
|
var path;
|
|
|
|
function initMap() {
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
center: {lat: 39.144684, lng: -84.510079},
|
|
zoom: 5
|
|
});
|
|
|
|
new google.maps.Marker({
|
|
position: {lat: 39.144684, lng: -84.510079},
|
|
map: map,
|
|
title: '\u0048\u0061\u0072\u0061\u006d\u0062\u0065'
|
|
});
|
|
}
|
|
|
|
function displayAirport(position){
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
center: position[0],
|
|
zoom: 5
|
|
});
|
|
|
|
new google.maps.Marker({
|
|
position: position[0],
|
|
map: map,
|
|
title: '\u0048\u0061\u0072\u0061\u006d\u0062\u0065'
|
|
});
|
|
}
|
|
|
|
function displayAirports(positions){
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
center: positions[0],
|
|
zoom: 5
|
|
});
|
|
for (var i = 0; i < positions.length; i ++) {
|
|
new google.maps.Marker({
|
|
position: positions[i][0],
|
|
map: map,
|
|
title: '\u0048\u0061\u0072\u0061\u006d\u0062\u0065'
|
|
});
|
|
}
|
|
repositionMapToMulti(positions);
|
|
}
|
|
|
|
function displayRoute(flightPath) {
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
center: {lat: 39.144684, lng: -84.510079},
|
|
zoom: 15
|
|
});
|
|
// CLEAR EXISTING MARKERS
|
|
if (marker1 !== undefined && marker2 !== undefined && path !== undefined) {
|
|
marker1.setMap(null);
|
|
marker2.setMap(null);
|
|
path.setMap(null);
|
|
}
|
|
|
|
if (flightPath.length < 2) {
|
|
return;
|
|
}
|
|
|
|
// CREATE MARKERS AT START AND FINISH
|
|
marker1 = new google.maps.Marker({
|
|
position: flightPath[0],
|
|
map: map
|
|
});
|
|
|
|
marker2 = new google.maps.Marker({
|
|
position: flightPath[flightPath.length - 1],
|
|
map: map
|
|
});
|
|
|
|
// DRAW POLYLINE FOR ROUTE
|
|
path = new google.maps.Polyline({
|
|
path: flightPath,
|
|
geodesic: true,
|
|
strokeColor: '#FF0000',
|
|
strokeOpacity: 1.0,
|
|
strokeWeight: 2
|
|
});
|
|
|
|
path.setMap(map);
|
|
|
|
repositionMap(flightPath);
|
|
}
|
|
|
|
function displayRoutes(flightPaths) {
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
center: {lat: 0, lng: 0},
|
|
zoom: 5
|
|
});
|
|
for (var i = 0; i < flightPaths.length; i++) {
|
|
var tempMarker1 = null;
|
|
var tempMarker2 = null;
|
|
var tempPath = null;
|
|
|
|
if (flightPaths[i].length < 2) {
|
|
continue;
|
|
}
|
|
|
|
// CREATE MARKERS AT START AND FINISH
|
|
tempMarker1 = new google.maps.Marker({
|
|
position: flightPaths[i][0],
|
|
map: map
|
|
});
|
|
|
|
tempMarker2 = new google.maps.Marker({
|
|
position: flightPaths[i][flightPaths[i].length - 1],
|
|
map: map
|
|
});
|
|
|
|
// DRAW POLYLINE FOR ROUTE
|
|
tempPath = new google.maps.Polyline({
|
|
path: flightPaths[i],
|
|
geodesic: true,
|
|
strokeColor: '#FF0000',
|
|
strokeOpacity: 1.0,
|
|
strokeWeight: 2
|
|
});
|
|
|
|
tempPath.setMap(map);
|
|
}
|
|
repositionMapToMulti(flightPaths);
|
|
}
|
|
|
|
function repositionMapToMulti(flightPaths){
|
|
var bounds = new google.maps.LatLngBounds();
|
|
|
|
for (var i = 0; i < flightPaths.length; i++) {
|
|
for (var j = 0; j < flightPaths[i].length; j++) {
|
|
bounds.extend(flightPaths[i][j]);
|
|
}
|
|
}
|
|
|
|
map.fitBounds(bounds);
|
|
}
|
|
|
|
function repositionMap(flightPath) {
|
|
var bounds = new google.maps.LatLngBounds();
|
|
|
|
for (var i = 0; i < flightPath.length; i++) {
|
|
bounds.extend(flightPath[i]);
|
|
}
|
|
|
|
map.fitBounds(bounds);
|
|
}
|
|
</script>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBnt2PJyKZsh-qrsTkbZwSGuUNWPromlLg&callback=initMap" defer></script>
|
|
</body>
|
|
</html> |