Cool Google Maps And HTML5 Geolocation API Mashup
A little (but getting bigger) Google Maps API, Google Places API, HTML5 Geolocation API mash up. It shows all Google listed fishing lakes within a given location on the map, allowing users to get more information via an info bubble.
The application is here : My Fishing Places
My Fishing Places helps you find coarse fishing locations within a 30 mile radius of a given location. When you first open the application it auto-detects your geolocation and adds a "home" marker on the map. Clicking on this brings up your geolocation data.
Setting A New Location
You can set a new location simply by clicking anywhere on the map to set a new "target" marker. You can also set a new location by filling in a valid postcode and clicking the "Set New Location" button.
Finding Places
Clicking on the "Find Places" button will add new "fish" markers representing places that the application has found for you. These are also clickable, showing an information bubble with further information links, a route planner, and a zoom facility. You can also find places for a new location by clicking on the map once to set the location, then clicking on the new "target" marker once to find places. All place markers on the map when exiting the application will be remembered for your next visit.
• It auto-detects a website visitor’s location and puts a marker on the map there.
• The map auto-zooms to make sure both markers are visible at the same time by default.
• Clicking on the visitor location marker will show a speech bubble giving the distance between the two locations.
• Clicking on the fish marker gives more details about the fishery, and a link to zoom into the lake via satellite view.
• The user can choose to get road/rail directional route plan by clicking on Get Route Plan button.
• They can reset the map to it’s defaults.
• They can add a new location marker, and get a route plan to that as well.
This all achieved by a mash up of the Google Maps API, Google Places API and HTML5 Geolocation API.
In geolocationMap.js, when JQuery function tells us the DOM is ready, we call the HTML5 Geolocation API with:
navigator.geolocation.getCurrentPosition( onPositionReady, onError );
When the data is ready we get the latitude and longitude of the visitor’s location and initialize the Google map with it:
function onPositionReady(position) {
if (errorCode == null) {
// Get geolcation data for the website visitor from the browser
visitorLatitude = position.coords.latitude;
visitorLongitude = position.coords.longitude;
// Init the Google map
initialize();
// Display some geolocation data to the web page
displayGeoData(position);
}
}
We store these co-ordinates in Local Storage. This is because the user can set a new location using the code in setNewLocation.js, and we want this to be remembered for their next visit. The code uses the Google Places API to do a text search on the terms “fishing lake†within a perimeter of around 30 miles of the visitor’s location. This gives lots of details about Google listings, such as name, url, website and vicinity. It truly is awesome, as is all Google Maps functionality.
Technically speaking, a PC or a mobile device has several ways to find out its own location.
* GPS is the most accurate way to determine positioning, but it is less energy efficient than other options and sometimes requires a lengthy start up time.
* A-GPS (assistive GPS) uses triangulation between mobile phone tow-ers and public masts to determine location. Although not as precise as GPS, A-GPS is sufficient for many scenarios.
* Mobile devices that support Wi-Fi access points can use hot spots to determine the user’s location.
* Stationary computers without wireless devices can obtain rough location information using known IP address ranges.
When it comes to sharing the physical location of users, privacy is a serious concern. According to the Geolocation API, “user agents must not send location information to websites without the express permission of the user.†In other words, a user must always opt in to share location information with a website.
The getCurrentPosition() function gets the user location one time. It takes two arguments in the form of callbacks: one for a successful location query and one for a failed location query. The success callback takes a Position object as an argument. It optionally takes a third argument in the form of a PositionOptions object.
navigator.geolocation.getCurrentPosition( onPositionReady, onError );
The Position object contains the properties shown below.
Properties of the Position Object:
coords.latitude
coords.longitude
coords.altitude
coords.accuracy
coords.altitudeAccuracy
coords.heading
coords.speed
timestamp
The watchPosition function keeps polling for user position and returns an associated ID. The device determines the rate of updates and pushes changes in location to the server.
The clearWatch function stops polling for user position. It takes the ID of watchPosition as an argument.
Fallback Solution
By including the JavaScript library:
http://j.maxmind.com/app/geoip.js
in your web page, you can use Modernizr to detect if a browser supports this API, and if not you can make an alternative call to get geolocation data:
visitorLatitude = geoip_latitude();
visitorLongitude = geoip_longitude();
Published on 6 May 2015 in JavaScript