Game Development Reference
In-Depth Information
user's geolocation, then render a marker on the map right where the user is located
(or somewhere within the accuracy distance of where the user is). While the Google
Maps API is rather robust, we will simply cover a fairly trivial example of how we can
go about obtaining the user's location then render that coordinate point on a map.
The general idea where the maps API is based is simple: create a map object to
be rendered inside some HTML container object, specify where this map is to be
centered (so that we can know the general area within the map that is immediately
visible to the user), and add markers to it. Marker objects take at least two attributes,
namely a reference to a map object and a GPS coordinate point. In our example,
we'll center the map on the user's GPS coordinate and also place a marker on that
same location.
// Step 1: Request permission to get the user's
location
function initGeo() {
navigator.geolocation.getCurrentPosition(renderToMap,
doNoGeo);
}
// Step 2: Render the user's location on a map
function renderToMap(position) {
var container = document.createElement("div");
container.id = "myContaier";
container.style.width = window.innerWidth +
"px";
container.style.height = window.innerHeight +
"px";
document.body.appendChild(container);
// Define some point based on a GPS coordinate
var coords = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude);
// Specify how we want the map to look
