Skip to content

Instantly share code, notes, and snippets.

@sangheestyle

sangheestyle/index.html

Created December 6, 2017 04:31
Show Gist options
  • Save sangheestyle/614e7fd500cb0dec78000857bf05ff61 to your computer and use it in GitHub Desktop.
Save sangheestyle/614e7fd500cb0dec78000857bf05ff61 to your computer and use it in GitHub Desktop.
Download ZIP
flight tracker with google maps API from https://goo.gl/VoHD3D
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flight</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>flight tracker</h1>
</div>
<div class="row">
<div class="col-md-6">
<div id="map" style="height: 500px; width: 800px"></div>
</div>
</div>
</div>
</body>
</html>
<script>
var initMap = function () {
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var data = [
{lat: 40.7163321, lng: -73.9536162},
{lat: 40.7263321, lng: -73.9736162},
{lat: 40.7363321, lng: -73.9736162},
{lat: 40.7463321, lng: -73.9736162},
{lat: 40.7563321, lng: -73.9936162},
{lat: 40.7663321, lng: -73.9936162},
];
for (var i = 0; i < data.length; i++) {
bounds.extend(new google.maps.LatLng(data[i].lat, data[i].lng));
}
map.fitBounds(bounds);
map.setZoom();
var flightPath = new google.maps.Polyline({
path: data,
map: map
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[0].lat, data[0].lng),
label: '✈',
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
@sangheestyle
Copy link
Author

screen shot 2017-12-05 at 11 30 59 pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment