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

Golang : Detect user location with HTML5 geo-location

By Adam Ng

Advertisement

Tutorials