Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map { height: 90%; width: 90% }
</style>
​
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script-->
    
<script type="text/javascript">
//var map;
//var infoWindow;
function initialize() {
    var map;
​
    //var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
    var markers = [
        {
            lat: 51.50852,
            lng: -0.12549,
            lat1: 58.96471,
            lng1: 5.80400,
            title: 'Stavenger - London',
            description: 'Flight from Stavenger to London'
        }
    ];
    
    // aj: there is no minWidth
    var infoWindow = new google.maps.InfoWindow({maxWidth:200, minWidth:200});
    infoWindow = new google.maps.InfoWindow({maxWidth:200, minWidth:200});
    var marker;
​
    var x = new google.maps.LatLng(16.697000,74.244000);
    
    var stavanger=new google.maps.LatLng(markers[0].lat1, markers[0].lng1);
​
    var london=new google.maps.LatLng(markers[0].lat, markers[0].lng);
    
    var j=0;
    var i=0;
    
    var points = new Array();
    var points2 = new Array();
​
    var mapProp = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom:14,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    }; 
    var map = new google.maps.Map(document.getElementById("map"),mapProp);
​
    google.maps.event.addListener(map, "click", function(event) {
        var marker = new google.maps.Marker({
            position: event.latLng, 
            animation: google.maps.Animation.DROP,
            map: map
        });
​
        document.getElementById("txttolat").value = event.latLng.lat();
        document.getElementById("txttolong").value = event.latLng.lng();
​
        var pt = event.latLng.lat();
        
        // array for latitude?
        points[j] = event.latLng.lat();
        // array for longitude?
        points2[j] = event.latLng.lng();
        j = j+1;
​
        document.getElementById("txtlat").value = points[0];
        document.getElementById("txtlong").value = points2[0];
    });
​
    for (i = 0; i < markers.length; i++) {
        var data = markers[i]
​
        var stavanger2 = new google.maps.LatLng(markers[i].lat1, markers[i].lng1);
        var london2 = new google.maps.LatLng(markers[i].lat, markers[i].lng);
​
        var myTrip = [stavanger2, london2];
        var flightPath = new google.maps.Polyline({
            path: myTrip,
            strokeColor: "#0000FF",
            strokeOpacity: 0.8,
            strokeWeight: 10,
            map: map,
            title: data.title
        });
        
        (function(flightPath, data) {
            google.maps.event.addListener(flightPath, 'click', function(e) {
                console.log('you clicked polyline');
                console.log(event);
                console.log(e.latLng);
​
                infoWindow.setContent(data.description);
​
                infoWindow.setPosition(e.latLng); 
                infoWindow.open(map);
//                infoWindow.open(map,flightPath);
//                infoWindow.setPosition(e.latLng);
                document.getElementById("txtname").value = data.title;
​
                document.getElementById("txtlat").value = e.latLng.lat();
                document.getElementById("txtlong").value = e.latLng.lng();
            });
        })(flightPath, data);
    }
}
​
google.maps.event.addDomListener(window, 'load', initialize);
               
</script>
</head>
​
<body>
    <div>txttolat
        Lat:<input type='text' id='txtlat' value='' />
        Long:<input type='text' id='txtlong' value='' />
        Lat:<input type='text' id='txttolat' value='' />
        Long:<input type='text' id='txttolong' value='' />
        Title:<input type='text' id='txtname' value='' />
    </div>
    <div id='map'></div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
antojurkovicpro
0viewers