Golang : Detect user location with HTML5 geo-location
Problem :
You need to detect your visitor's location (i.e latitude and longitude) and display on Google map showing the visitor's current location. How to do that in Golang ?
Solution :
Use HTML5 Geolocation function to retrieve a visitor's current location. The code example below demonstrate how to load an external HTML/Javascript file, display map with the location and pass the latitude, longitude data back to the server.
NOTE : Need to allow pop-up in the browser for this example to work
to run the program, simple execute the command
>go run html5geolocation.go
and direct your browser to port 8080. such as www.example.com:8080
html5geolocation.go file:
package main
import (
"fmt"
"github.com/gorilla/mux"
"html/template"
"net/http"
)
func home(w http.ResponseWriter, r *http.Request) {
var templates = template.Must(template.New("geolocate").ParseFiles("getlocation.html"))
err := templates.ExecuteTemplate(w, "getlocation.html", nil)
if err != nil {
panic(err)
}
prompt := "Detecting your location. Please click 'Allow' button"
w.Write([]byte(prompt))
}
func location(w http.ResponseWriter, r *http.Request) {
vars := mux.Vars(r)
lat := vars["lat"]
long := vars["long"]
w.Write([]byte(fmt.Sprintf("Lat is %s \n", lat)))
w.Write([]byte(fmt.Sprintf("Long is %s \n", long)))
fmt.Printf("Lat is %s and Long is %s \n", lat, long)
// if you want to get timezone from latitude and longitude
// checkout http://www.geonames.org/export/web-services.html#timezone
}
func main() {
mux := mux.NewRouter()
mux.HandleFunc("/", home)
mux.HandleFunc("/location/{lat}/{long}", location)
http.ListenAndServe(":8080", mux)
}
and getlocation.html
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see a blank space instead of the map, this
// is probably because you have denied permission for location sharing.
var map;
function initialize() {
var mapOptions = {
zoom: 6
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
// capture latitude and longtitude... pass back to backend
// this tutorial open a new window(pop-up) ...if you don't want to open new window, use AJAX to
// send data to backend
handleGeolocationData(position.coords.latitude,position.coords.longitude);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleGeolocationData(latitude, longitude){
// window.location = "/location/"+latitude+"/"+longitude;
var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
var URL = "//socketloop.com:8080/location/"+latitude+"/"+longitude;
window.open(URL, "_blank", strWindowFeatures);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
References :
https://www.socketloop.com/references/golang-html-template-template-execute-function-example
https://www.socketloop.com/tutorials/golang-gorilla-mux-routing-example
https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
By Adam Ng
IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.
Advertisement
Tutorials
+5k Golang : Calculate half life decay example
+5.7k Golang : Function as an argument type example
+6.4k Golang : Embedded or data bundling example
+10.4k Golang : Interfacing with PayPal's IPN(Instant Payment Notification) example
+9.1k Golang : How to get garbage collection data?
+78.3k Golang : How to return HTTP status code?
+14.2k How to automatically restart your crashed Golang server
+4.8k Golang : Get a list of crosses(instruments) available to trade from Oanda account
+15.4k Golang : Convert date format and separator yyyy-mm-dd to dd-mm-yyyy
+6.8k Golang : constant 20013 overflows byte error message
+8.3k Linux/Unix : fatal: the Postfix mail system is already running
+25.5k Golang : How to write CSV data to file