Aplikace pro zobrazení GPS souřadnic v satelitní mapě Google Maps.
Aplikace využívá API Google Maps.
JS soubor
$( document ).ready(function() {
$("#setpoints").click(function(){
var strpoints=$('#txtpoints').val();
var arraypoints=strpoints.split("\n");
var locations=new Array();
for(var i=0; i<arraypoints.length; i++){
var longlat=arraypoints[i].split(",");
locations[i]=[""+i+"",longlat[0],longlat[1],i];
}
init(locations);
});
});
var map;
var markers = [];
function init(locations){
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 17,
center: new google.maps.LatLng(Number(locations[Math.floor(locations.length/2)][1]),Number(locations[Math.floor(locations.length/2)][2])),
mapTypeId: 'satellite'
});
var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: {lat:Number(locations[i][1]), lng:Number(locations[i][2])},
map: map,
html: locations[i][0],
id: i,
});
google.maps.event.addListener(markers[i], 'click', function(){
var infowindow = new google.maps.InfoWindow({
id: this.id,
content:this.html,
position:this.getPosition()
});
google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
markers[this.id].setVisible(true);
});
this.setVisible(false);
infowindow.open(map);
});
}
}HTML soubor
<!DOCTYPE html>
<html lang="cs-CZ">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8" />
<meta name="copyright" content="VOXCAFE s.r.o." />
<meta name="robots" content="index, follow" />
<meta name="author" content="VOXCAFE s.r.o." />
<meta name="distribution" content="global" />
<meta name="title" content="VOXCAFE Microsite" />
<title>Maps point</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyBMTHzXwqoJuwOUBMsycvYM1QCCMEQ364Q"></script>
<script>
// Vzorova data pro rychle odzkouseni
var tpldata=
"78.7040084808,16.4360082241"+"\n"+
"78.7041419768,16.4359657526"+"\n"+
"78.7042680669,16.4359046038"+"\n"+
"78.7043523479,16.4358607092"+"\n"+
"78.7044760099,16.4357332062"+"\n"+
"78.704567117,16.4356049546"+"\n"+
"78.7045129448,16.4370845502"+"\n"+
"78.704496064,16.4390244795"+"\n"+
"78.7042828258,16.4389837564"+"\n"+
"78.7040912239,16.4390418274"+"\n"+
"78.7040795581,16.4409522509"+"\n"+
"78.7041949818,16.4409441945"+"\n"+
"78.704333373,16.4409814563"+"\n"+
"78.704440525,16.4409879964"+"\n"+
"78.7046210921,16.441018961"+"\n"+
"78.7046231091,16.4459349294"+"\n"+
"78.7044178727,16.4458939029"+"\n"+
"78.7043191531,16.4457228903"+"\n"+
"78.7041497914,16.445710046"+"\n"+
"78.7041330503,16.4443002337"+"\n"+
"78.7041166313,16.4427299645";
$(document).ready(function() {
$("#loadpoints").click(function(){
$('#txtpoints').val(tpldata);
});
});
</script>
<style>
#map_canvas {
border:1px solid black;
height: 800px;
width: 100%;
border-radius: 4px;
clear: both;
}
textarea{min-height:250px; width:378px;}
ul li{padding: 0 0px 5px 0;}
</style>
</head>
<body>
<h1>View Maps Point</h1>
<form>
<div style="float: left;">
<textarea name="points" id="txtpoints"> </textarea>
</div>
<div style="float: left; margin-bottom: 20px;">
<p style="padding: 0 0 0 25px;">
Aplikace pro vizualizaci bodů nameřených pomocí GPS.
</p>
<ul>
<li>Do textového pole napište souřadnice ve formátu: <b>Lat,Lng</b>. <br> <span style="font-size: 13px;">Na každý řádek jednu dvojici souřadnic.</span></li>
<li>Klikněte na tlačítko SET.</li>
<li>Pro otestování můžete nahrát vzorová data, kliknutím na tlačítko Load template data. Následně klikněte na tlačítko SET.</li>
</ul>
<input type="button" value="SET" id="setpoints">
<input type="button" value="Load template data" id="loadpoints">
</div>
</form>
<div id="map_canvas"></div>
<script src="api.js"></script>
</body>
</html>