I’m attempting to get the users location for a mobile web app, if their browser doesn’t support geolocation then send them to a default map center location. This works fine on Firefox, but when I test it on an iPhone it prompts for location usage then the map does not render. I noticed though once I close safari and reopen it the map then begins to render with the geolocation. Is this a bug in safari or something wrong in the way i am initializing my map?
function init() {
var center = new google.maps.LatLng(42.283151,-87.955098);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var loc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 11,
center: loc,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
new google.maps.Marker({
position: point,
map: map
});
});
}
else {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 15,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
}
Are you waiting long enough for the iPhone's GPS to get a fix on your location? This initial activation of location services can take a while to get an accurate location to return to the API, which explains why the subsequent load works as intended.
It might be worth your while to add some code to indicate that the HTML5 geolocation function is running (perhaps displaying a "Loading..." message after you call getCurrentPosition).
An error callback would be worthwhile as well to catch and gracefully handle and errors that occur during getCurrentPosition. You can definitely run into cases where navigator.geolocation is true but it won't trigger the success function you've defined.
Related
I have integrated google maps in my ionic 2 project and it was working fine until I got the requirement to add the full screen option. I added the line, tested on google chrome, and when i clicked on full screen I got a blank screen. Compiled on Android, same problem. However it is working fine on Mozilla and IE. This is my code
this.platform.ready().then(() => {
let latLng = new google.maps.LatLng(-31.563910, 147.154312);
let mapOptions =
{
center: latLng,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: true
}
this.map = google.maps.Map(this.mapElement.nativeElement, mapOptions);
this.mapCluster.addCluster(this.customersView.paginatedCustomers, this.map);
});
I understand that Google updated their map a day or two ago. Since the update, the weather layer no longer works on the webpage I am building. I have a MacBook Air with Apache server installed.
When the map loads the marker still works and the latitude and longitude are correct, but the city names no longer show nor does any of the weather features.
Here is what I have tried to fix the issue:
* I tried the three different web browsers that I have installed on my MacBook - Firefox, Safari, Google. Same issue in all three.
* I tried turning my Mac off and back on again.
* I went to the Google maps API website and according to that my coding is correct.
* If I do set the zoom property to 13, the city names will show up but no weather layer...which I understand is the proper behavior with a zoom setting of 13 or higher.
* On the Google maps API website, I copied and pasted the example code for the weather layer and it worked! They have a latitude and longitude of a country outside of the USA. I compared my coding to the example coding and my coding is the same, except for the latitude and longitude. SO, when I changed the latitude and longitude in the example coding to another location the weather layer stopped working.
Here is my code, but it seems to me that the issue is on Google's end. It was suggested that I post the question here (I already posted this question at productforums.google.com) because employee's from Google will see this question.
var map;
function initialize()
{
var mapOptions =
{
center: new google.maps.LatLng(40.0157394, -105.2792435),
/*center: new google.maps.LatLng(49.265984,-123.127491),*/
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_CENTER
}
};
map = new google.maps.Map(document.getElementById("gmap"), mapOptions);
/* Weather */
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
/* Marker & InfoWindow */
var marker = new google.maps.Marker(
{
position: mapOptions.center,
map: map
});
var text = '<div id="mapText">' + 'I live in beautiful Boulder, CO!' + '</div>';
var infowin = new google.maps.InfoWindow(
{
content: text,
pixelOffset: new google.maps.Size(0, 20)
});
infowin.open(map, marker);
google.maps.event.addListener(marker, 'click', function()
{
infowin.open(map,marker);
});
};
google.maps.event.addDomListener(window, 'load', initialize);
To work around the issue for now, I set my zoom to 13 so at least the city and street names will show, and the weather features are disabled when zoom is set to 13 or higher.
I'm pretty sure my coding is correct. Any ideas will be appreciated.
I'm using Geolocation but I'm having trouble recognizing errors to be able to offer an alternative.
My HTML looks like this:
<button onclick="getLocation()">Get your location now</button>
<div id="google_canvas"></div>
<p id = 'error'></p>
My script looks like this:
function getLocation(){
if(navigator.geolocation)
{
var map;
var mapOptions =
{
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('google_canvas'), mapOptions);
navigator.geolocation.getCurrentPosition(function(position)
{
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),latitude=document.getElementById("latitude"),longitude=document.getElementById("longitude");
var infowindow = new google.maps.InfoWindow(
{
map: map,
position: geolocate,
content:
' * output content within map * '
});
map.setCenter(geolocate);
latitude.value = position.coords.latitude;
longitude.value = position.coords.longitude;
});
}
else
{
document.getElementById('error').innerHTML = 'No Geolocation Support';
}
};
google.maps.event.addListener(map, 'idle', function() {
});
My version of IE9 does not support Geolocation (I've tried their test site with their own script), but it gives me no error or warning, plus if I do not allow location in Firefox or Chrome, I don't get any error or alert either.
Can someone help? If it cannot run, i can offer an alternative so I don't think i need to look through error codes so much, but I do need to be able to detect failure so I can offer my alternative, but the error portion in my script will not run, regardless.
My question really is, why won't this else run?
else
{
document.getElementById('error').innerHTML = 'No Geolocation Support';
}
Thanks
For your error message it will appear if your browser does not support geolocation, to enable disable geolocation on browser that supports it you usually need to take look next to the address bar there should be a small icon that you can use to disable/enable geolocation.
In order for you to detect previous decision weather you enabled/disabled geolocation you can use the solution I suggested in this article :
Is there a way of detecting whether a user has already given permission to use navigator.geolocation?
For IE9 it is working fine, the only thing is you should click Allow blocked cnotent at the bottom of the web page.
I checked the solution for my problem but all I get are codes made by Google assigned to a static longitude and latitude.
Here is JavaScript Code:
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
I want to make it dynamic according to the user location.
You can try this one...
http://netmera.com/location/js/geolocation.js
Adding geolocation.js script your html and then below code try.
$.geolocation.find(function(location) {
var lat = location.latitude;
var lng = location.longitude;
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
You can fetch the longitude and latitude of your user via the HTML5 GeoLocation API (see here for example code) and pass the retrieved values.
You will need to use HTML5 Geolocation API. Number of factors: the user has to permit your website to gather info regarding you location, if he doesn't, you won't be able to gather the info. Secondly, even the info is not always accurate. In collecting the location info, the API uses a number of resources, including the location of the server dishing out the page at your current IP address, or it might use the users GPRS service if he is viewing you website in a GPRS enabled device. In either case, chances are not much that you will get the exact location, you can almost always expect an approximate location.
I have read up on GPS Real time tracking and found out several things about it, mostly requiring PHP, zope and a database to store the incoming data. Some other methods uses ajax with relations to PHP.
As regards to my question, is it possible to do so with just html and JS, using markers or anything else to populate the Google Map when you move anywhere in the city? Need some help on this, Thanks!
Yes, it is possible. Most browsers in the latest smartphones have implemented the W3C Geolocation API:
The Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation, such as latitude and longitude. The API itself is agnostic of the underlying location information sources. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device's actual location.
The API is designed to enable both "one-shot" position requests and repeated position updates, as well as the ability to explicitly query the cached positions.
Using the Geolocation API to plot a point on Google Maps, will look something like this:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var point = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Place a marker
new google.maps.Marker({
position: point,
map: map
});
});
}
else {
alert('W3C Geolocation API is not available');
}
The above will only gather the position once, and will not auto update when you start moving. To handle that, you would need to keep a reference to your marker, periodically call the getCurrentPosition() method, and move the marker to the new coordinates. The code might look something like this:
// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = null;
function autoUpdate() {
navigator.geolocation.getCurrentPosition(function(position) {
var newPoint = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
if (marker) {
// Marker already created - Move it
marker.setPosition(newPoint);
}
else {
// Marker does not exist - Create it
marker = new google.maps.Marker({
position: newPoint,
map: map
});
}
// Center the map on the new position
map.setCenter(newPoint);
});
// Call the autoUpdate() function every 5 seconds
setTimeout(autoUpdate, 5000);
}
autoUpdate();
Now if by tracking you mean that you should also store this information on a server (so that someone else could see you moving from a remote location), then you'd have to send the points to a server-side script using AJAX.
In addition, make sure that the Google Maps API Terms of Use allow this usage, before you engage in such a project.
UPDATE: The W3C Geolocation API exposes a watchPosition() method that can be used instead of the setTimeout() mechanism we used in the above example.