<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div style="width:100%;height:400px;padding:0;margin:0;">
<div id="canvas" style="width:100%; height:100%;padding:0;margin:0;"></div>
</div>
function initialize() {
var colors = ['#00bfff','#7eabe9','#799fe7','#7293e5','#6989e4','#5e7ee3','#5273e2','#4169e1','#4b6fde','#5274db','#5979d8','#5f7fd5','#6584d2','#698acf','#1e90ff'];
var location = [
{"name":"lisboa","lat":38.725717,"lng":-9.150248},
{"name":"madrid","lat":40.420275,"lng":-3.705766},
{"name":"burdeos","lat":44.836625,"lng":-0.581048},
{"name":"loira","lat":46.621773,"lng":2.452032},
{"name":"paris","lat":48.856929,"lng":2.341198},
{"name":"bruselas","lat":50.848375,"lng":4.349679},
{"name":"rotterdam","lat":51.922848,"lng":4.478452},
{"name":"amsterdam","lat":52.373085,"lng":4.893276}
];
var map = new google.maps.Map(document.getElementById('canvas'), {
'center' : new google.maps.LatLng(0,-180),
'zoom' : 3,
'mapTypeId' : google.maps.MapTypeId.TERRAIN
});
// store positions on var flightPlanCoordinates
var flightPlanCoordinates = [];
// set markers and popovers/infWindow
// *remember var flightPlanCoordinates*
for (var i = 0; i < location.length; i++) {
var lat = location[i].lat,
lng = location[i].lng,
name = location[i].name;
var pos = new google.maps.LatLng(lat, lng);
var infowindow = new google.maps.InfoWindow({
'content' : name,
'map' : map,
'position' : pos
});
infowindow.close();
flightPlanCoordinates.push(pos);
var marker = new google.maps.Marker({
'position' : pos,
'map' : map,
'title' : name,
'icon' : {
'path' : google.maps.SymbolPath.CIRCLE,
'scale' : 5,
'strokeColor': colors[i]
}
});
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) {
infowindow.close();
}
infowindow.open(map, this);
});
}
// set polylines
// *remember var flightPlanCoordinates*
for (var i = 0; i < flightPlanCoordinates.length; i++) {
if(typeof flightPlanCoordinates[i+1] == 'undefined'){
continue;
}
var PathStyle = new google.maps.Polyline({
'path' : [
flightPlanCoordinates[i],
flightPlanCoordinates[i+1]
],
'strokeColor' : colors[i],
'strokeOpacity' : 1.0,
'strokeWeight' : 2,
'map' : map
});
}
}
// Draw Google Maps V3
google.maps.event.addDomListener(window, 'load', initialize);
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |