LabVIEW VI and a Google Maps API Javascript MapI was recently working on a robot that would get to a GPS location I would send to it, the robot is controlled with LabVIEW, I thought it would be a good idea to use the Google Maps Javascript API since it has a great user interface and it’s easy to use.
The code below is just the skeleton of it, so that you can use this functionality in any other application you can think of and not just mine. Download the code from here, be sure to get your own Google Maps API key and replace it in the "index.html" file where it says "API_KEY"
Here is a video of what the code does
What You’ll Need:
Although I can provide you with the code you will need two things that you might not already have: a PHP server, and the Google Maps API key.
Once you have installed the PHP server (XAMPP), create a folder called "myWebPage" inside the folder called "htdocs" and put all the files from here in there. Now start the Apache server from the "XAMPP Control Panel" and navigate in your web browser to "http://localhost/myWebPage/"
Code Explanation:
Next I will explain the critical components of the code.
The HTML Page: User Interface (Map)
The send button was created using the HTML button tag
<button class="btn btn-primary" id="send">Send</button>
An empty division was created that is as wide as it can be and 500px in height, this division will be filled with the map
<div id="map_canvas" style="width:100%; height:500px;"></div>
Whenever the user clicks on the map the set of coordinates is saved in a hidden HTML input field
google.maps.event.addListener(map,'click',function(e){
newLocationMarker.setPosition(e.latLng);
newLocationInfoWindow.close();
newLocationInfoWindow.setContent("");
$("input#newLat").val(e.latLng.lat());
$("input#newLng").val(e.latLng.lng());
newLocationInfoWindow.setContent('<b>Coordinates:</b> ('+e.latLng.lat()+','+e.latLng.lng()+')');
newLocationInfoWindow.open(map,newLocationMarker);
});
When the user clicks on the Send button the values in the hidden HTML input fields are sent to a PHP script.
$("button#send").click(function(){
$.post('gpsCoordinateReceiver.php',{newLat:$("input#newLat").val(),newLng:$("input#newLng").val()},function(data){
$("div#messageForUser").html(data);
});
});
So these are the critical components, now here is the full code for reference.
Full HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=true">
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12" id="header">
<h1>GPS Robot Interface</h1>
</div>
</div>
<div class="row">
<div class="span12">
<p>
<button class="btn btn-primary" id="send">Send</button>
<div id="messageForUser">
</div>
</p>
</div>
<div class="span12">
<div class="alert alert-info fade in">
<button class="close" data-dismiss="alert">×</button>
<b>How To Use:</b> Click on the map to select a coordinate, click the "Send" button to submit your choice.
</div>
<div id="map_canvas" style="width:100%; height:500px;"></div>
</div>
</div>
</div>
<!----------------->
<input type="hidden" id="newLat" value="" />
<input type="hidden" id="newLng" value="" />
<!------------------->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var initialLat=35.45;
var initialLng=-23.89;
$("input#newLat").val(initialLat);
$("input#newLng").val(initialLng);
function initializeMap() {
var mapInitialPos = new google.maps.LatLng(initialLat, initialLng);
var geocoder = new google.maps.Geocoder();
var newLocationAddress;
//alert(newLocationAddress);
var mapOptions = {
center: mapInitialPos,
zoom: 11,
tilt:0,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var newLocationMarker = new google.maps.Marker({
map: map,
position: mapInitialPos,
icon:new google.maps.MarkerImage("images/target-marker.png",
new google.maps.Size(32, 32),
new google.maps.Point(0,0),
new google.maps.Point(16, 16))
});
var newLocationInfoWindow=new google.maps.InfoWindow();
newLocationInfoWindow.setContent('am the location target, click around');
newLocationInfoWindow.open(map,newLocationMarker);
google.maps.event.addListener(map,'click',function(e){
newLocationMarker.setPosition(e.latLng);
newLocationInfoWindow.close();
newLocationInfoWindow.setContent("");
$("input#newLat").val(e.latLng.lat());
$("input#newLng").val(e.latLng.lng());
// try to get address for lat and lng
/*geocoder.geocode(
{'latLng':e.latLng},
function(results,status){
if(status==google.maps.GeocoderStatus.OK){
if(results[0]){
newLocationAddress=results[0].formatted_address;
}else{
newLocationAddress="No address available for this location";
}
}else{
newLocationAddress="Geocoder error: "+status;
}
});*/
newLocationInfoWindow.setContent('<b>Coordinates:</b> ('+e.latLng.lat()+','+e.latLng.lng()+')');
newLocationInfoWindow.open(map,newLocationMarker);
});
}
initializeMap();
$(".alert").alert();
$("button#send").click(function(){
$.post('gpsCoordinateReceiver.php',{newLat:$("input#newLat").val(),newLng:$("input#newLng").val()},function(data){
$("div#messageForUser").html(data);
});
});
});
</script>
</body>
</html>
The PHP Script:
The PHP script is in charge of writing the latitude and longitude values that it received from the HTML page to a set of text files called "newLat.txt" and "newLng.txt" to store the latitude and longitude respectively. The script also echos back a message to let the user know that the message was received and when.
<?php
$newLat=$_POST['newLat'];
$newLng=$_POST['newLng'];
date_default_timezone_set('America/Chicago');
$dateTime=date('l jS \of F Y \a\t h:i:s A');
echo <<<EOT
<p>
<div class="alert alert-success fade in">
<button class="close" data-dismiss="alert">x</button>
New location: ($newLat,$newLng) sent on $dateTime
</div>
</p>
EOT;
file_put_contents('newLat.txt',$newLat);
file_put_contents('newLng.txt',$newLng);
?>
The LabVIEW VI:
The LabVIEW consists of just a set of file read blocks, one for the latitude and one for the longitude.