Issue
I have the following situation, I want to make a local webserver which should plot multiple gps location on Google maps with Google maps API. The latitude and longitude coordinates are stored in a list named file.txt like this lat, long (new line) lat, long ... and new coordinates are added every minute. I tried various ways to plot them from the file, but I am a beginner in html and PHP and have no idea how to do it properly.
so this is the code to plot markers with Google API
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Markers</title>
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
and basically here I have to import the locations from the file
var marker = new google.maps.Marker({
position: coordinatesfromfile,
map: map,
title: 'Hello World!'
Solution
As the question is a little light on details the following might not fit your initial needs of adding the markers on page load. The continual updating of the text file with new locations is too broad to tackle here - several options exist ~ Ajax polling, EventSource / Server Sent Events or WebSockets
The gist of the following is that the text file is read by php and a JSON representation of the contents are created as a Javascript variable. The initMap file then iterates through this javascript variable - though I should stress the structure of the text file is unclear so it may or may not work right away. For each line in the text file there should be an entry in the json file - this entry contains lat/lng coordinates.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Markers</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
<?php
/*
Assuming the file is in the same directory as the page with
the map and that the page is a PHP enabled page.
using `file` will return the contents of a file as an array.
This array is then encoded as a JSON string which we can
process in javascript.
*/
printf("
var locations=%s;",
json_encode( file( 'file.txt', FILE_SKIP_EMPTY_LINES ) )
);
?>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
for( var n in locations ){
try{
let line=locations[ n ].split(',');
new google.maps.Marker({
position: { lat:line[0].toFixed(8), lng:line[1].toFixed(8) },
map: map
});
}catch( err ){
console.warn( 'Error: %o Index: %s',err, n )
}
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>
Answered By - Professor Abronsius
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.