Main /

Gmap-Polyline


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<title>[email protected]</title>
<script type="text/javascript">

function initialize() {
var page = "https://biston-1d773-default-rtdb.asia-southeast1.firebasedatabase.app/tana.json"
      loadJSON(page, function(response) {
      var k = JSON.parse(response);
      var kx = k['data']
      var ky = kx.split(",")


console.log(ky)

var point = new google.maps.LatLng(ky[0],ky[1]);
//var point = new google.maps.LatLng(a1,a2);
       var mapOptions = {
               zoom: 40,
               center: point,
               mapTypeId: google.maps.MapTypeId.SATELLITE }; 


var map = new google.maps.Map(document.getElementById("allmap"),mapOptions);

var points0=[new google.maps.LatLng(ky[0],ky[1]),new google.maps.LatLng(ky[2],ky[3])];
var polyline0 = new google.maps.Polyline( {map: map,path:points0,strokeColor:"yellow", strokeWeight:6, strokeOpacity:0.5});

var points1=[new google.maps.LatLng(ky[2],ky[3]),new google.maps.LatLng(ky[4],ky[5])];
var polyline1 = new google.maps.Polyline( {map: map,path:points1,strokeColor:"yellow", strokeWeight:6, strokeOpacity:0.5});

var points2=[new google.maps.LatLng(ky[4],ky[5]),new google.maps.LatLng(ky[6],ky[7])];
var polyline2 = new google.maps.Polyline( {map: map,path:points2,strokeColor:"yellow", strokeWeight:6, strokeOpacity:0.5});

var points3=[new google.maps.LatLng(ky[6],ky[7]),new google.maps.LatLng(ky[8],ky[9])];
var polyline3 = new google.maps.Polyline( {map: map,path:points3,strokeColor:"yellow", strokeWeight:6, strokeOpacity:0.5});

var points4=[new google.maps.LatLng(ky[8],ky[9]),new google.maps.LatLng(ky[10],ky[11])];
var polyline4 = new google.maps.Polyline( {map: map,path:points4,strokeColor:"yellow", strokeWeight:6,strokeOpacity:0.5});



      });///json

}
    google.maps.event.addDomListener(window, 'load', initialize);



function loadJSON(file, callback) {   
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', file, true); // Replace 'my_data' with the path to your file
    xobj.setRequestHeader("Access-Control-Allow-Origin","*");
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
          }
    };
    xobj.send(null);}

</script>
</head>
<body>
<div id="allmap"></div>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<title>??</title>
<script type="text/javascript">

// ????API??

function initialize() {

var a1 = "-0.962452966972857"
var a2 = "131.320046594592"

var b1 = "-0.962272117710949"
var b2 = "131.320049494947"

var c1 = "-0.962270657965689"
var c2 = "131.319959662813"

var d1 = "-0.962452966972857"
var d2 = "131.320046594592"

var d1 = "-0.962451507231518"
var d2 = "131.319956762454"

var point = new google.maps.LatLng(a1,a2);
       var mapOptions = {
               zoom: 20,
               center: point,
               mapTypeId: google.maps.MapTypeId.SATELLITE }; 


var map = new google.maps.Map(document.getElementById("allmap"),mapOptions);
var points0=[new google.maps.LatLng(a1,a2),new google.maps.LatLng(b1,b2)];
var polyline0 = new google.maps.Polyline( {map: map,path:points0,strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
var points1=[new google.maps.LatLng(b1,b2),new google.maps.LatLng(c1,c2)];
var polyline1 = new google.maps.Polyline( {map: map,path:points1,strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
var points2=[new google.maps.LatLng(c1,c2),new google.maps.LatLng(d1,d2)];
var polyline2 = new google.maps.Polyline( {map: map,path:points2,strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
var points3=[new google.maps.LatLng(d1,d2),new google.maps.LatLng(a1,a2)];
var polyline3 = new google.maps.Polyline( {map: map,path:points3,strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});

// etc rest of your points 
}
    google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="allmap"></div>
</body>
</html>