Simple Polylines
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
CSS
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
JavaScript
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {
lat: 28.5375392,
lng: -78.3190407
},
mapTypeId: 'satellite'
});
$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22https%3A%2F%2Fwww.marinetraffic.com%2Fen%2Fais%2Fget_info_window_json%3Fasset_type%3Dship%26id%3D434560%22&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", function(d) {
var ship = new google.maps.Marker({
position: {
lat: parseFloat(d.query.results.json.values.ship_lat),
lng: parseFloat(d.query.results.json.values.ship_lon)
},
map: map,
title: d.query.results.json.values.shipname
});
});
$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22https%3A%2F%2Fwww.marinetraffic.com%2Fen%2Fais%2Fget_info_window_json%3Fasset_type%3Dship%26id%3D426008%22&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", function(d) {
var ship = new google.maps.Marker({
position: {
lat: parseFloat(d.query.results.json.values.ship_lat),
lng: parseFloat(d.query.results.json.values.ship_lon)
},
map: map,
title: d.query.results.json.values.shipname
});
});
}