i have a map that shows some markers on it . what i want to do is that if a user is from city a the map initiates on city a and if a user is from city b the map initiates from b . so now what i have is like below :
var myMap = new L.Map('map', {
maptype: 'dreamy',
poi: true,
traffic: true,
center: [35.699739, 51.338097],
zoom: 8
});
according to the documentation i added center which is an array of latlong now i want to get the user location and set it instead of center .
To get the user's location, you will need to use the Javscript Geolocation API.
Based on the example at W3 Schools:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
var myMap = new L.Map('map', {
maptype: 'dreamy',
poi: true,
traffic: true,
center: [position.coords.latitude, position.coords.longitude],
zoom: 8
});
// ... do more stuff with your map
});
}
You will likely want to introduce some error handling in the above.
Alex T's answer fetches the user's location correctly, but it is not good practice to initialise the map in the getCurrentPosition() callback. If the map is already initialised elsewhere, this will overwrite the original map with a new one, which in Alex's example would not be accessible elsewhere in the code, since myVar is a local variable inside the callback. If the map isn't already initialised, then it won't load at all if the geolocation fails or is blocked by the user. Instead, it is better to initialise the map first with a default location, and then pan it to the correct place if geolocation succeeds:
var myMap = new L.Map('mapid', {
maptype: 'dreamy',
poi: true,
traffic: true,
center: [35.699739, 51.338097],
zoom: 8
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => myMap.panTo([position.coords.latitude, position.coords.longitude]),
(err) => console.warn(`Geolocation error (${err.code}): ${err.message}`),
{ timeout: 20000 } // Timeout in ms
);
}
As an aside, when I tested my answer, I was getting strange error messages, until I remembered I had a browser plugin installed to hide my location from websites. Once I disabled that, it worked fine. Also make sure that the code is running in a secure context (e.g. over https - see the Geolocation API documentation for more details.
Related
I am using Google Satellite map on an application. It was working fine and suddenly the map images start not showing. Instead of the terrain images, the map is showing the message "Sorry, we have no imagery here".
It is happening on my office IP and other testers' IPs. If I access from another IP or mobile data it works and shown the satellite images. I am not sure if google blocks IPs in case of continuous access on the maps.
Also I am able to see a lot of errors accessing the images
While clicking on the links for loading images, I am getting an error page like below instead of the map tile image.
Any clues on this issue is appreciated
To avoid showing these errors, in case they are due to the use of a zoom level that is too high for the area you are viewing, you can use the MaxZoomService. Kindly note that the below code snippet doesn't work because apparently access to the service without an API key is not possible.
Copy the code and test it with a working API key.
var map, maxZoomService;
function initialize() {
maxZoomService = new google.maps.MaxZoomService();
var myLatLng = new google.maps.LatLng(0, 0);
var mapOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListenerOnce(map, 'idle', function() {
checkZoom();
});
google.maps.event.addListener(map, 'zoom_changed', function() {
checkZoom();
});
}
function checkZoom() {
let zoom = map.getZoom();
maxZoomService.getMaxZoomAtLatLng(map.getCenter(), function(response) {
if (response.status !== 'OK') {
alert('maxZoomService error: ' + response.status);
document.getElementById('max-zoom').innerHTML = 'n/a';
document.getElementById('max-zoom-service').innerHTML = response.status;
} else {
if (response.zoom < zoom) {
map.setZoom(response.zoom);
document.getElementById('max-zoom').innerHTML = response.zoom;
document.getElementById('max-zoom-service').innerHTML = response.status;
}
}
document.getElementById('curr-zoom').innerHTML = map.getZoom();
});
}
initialize();
#map-canvas {
height: 130px;
}
span {
font-weight: bold;
}
<div id="map-canvas"></div>
Current Zoom Level: <span id="curr-zoom"></span><br>
Max Zoom Level: <span id="max-zoom"></span><br>
Max Zoom Service Status: <span id="max-zoom-service"></span>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
If the zoom level is not the issue, make sure that you are using a valid API key. In any case, it might be worth creating a new key and trying again with that one. If that still doesn't work, I would try to contact Google directly with more information as it might be that your network IP or IP range was banned by Google for some reason.
I know this is an old question but, I recently got this error too. So, the problem, in my case was the version of the API script I was using.
I'm answering this because I didn't found this solution over here, so, just in case someone was getting the same error.
Just adding v=3.35 (version number) to the url and it works.
Example: https://maps.googleapis.com/maps/api/js?v=3.35&key=API_KEY...
They explain here:
https://developers.google.com/maps/documentation/javascript/versions#an-update-affected-my-application
Thank you for all the response and I was able to find and fix the real issue. Adding the details here for reference.
I have contacted Google support with the request details and they were able to figure out the exact problem. The reason is their image servers are blocking the request from this project (hybrid mobile project - Android) since it found out that there are invalid request is also coming from the project. The invalid request is referred to as the requests without proper header information.
Based on that information, I could find out that a caching mechanism in the project was trying to cache the images and that is which sends the invalid requests. Adding proper header to that cache mechanism solved the issue forever.
I'm facing a really peculiar issue here. I'm able to run a code on JsFiddle, but not able to run the exact code on Codepen.
Neither am i able to run it on my local.
Please fin below the links-
CodePen Link
JsFiddle Link
JavaScript Used-
var placeSearch, autocomplete;
function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
{types: ['geocode']});
autocomplete.addListener('place_changed', fillInAddress);
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
If open the browser console you will notice the following error occurs on codepen site:
RefererNotAllowedMapError exception
Accordintg to Error Messages page:
The current URL loading the Google Maps JavaScript API has not been
added to the list of allowed referrers. Please check the referrer
settings of your API key on the Google API Console.
See API keys in the Google API Console. For more information, see Best
practices for securely using API keys.
To fix the issue:
go to Google API Console
under Credentials menu select select appropriate API key
in the list of HTTP referers add http://s.codepen.io/*
I am using the Google Maps JavaScript API in combination with an api key. This works great for some hours or days, but after a specific intervall I get the following 403 error and the map is gone:
I don't know where the problem is because I didn't have reached the 25.000 requests per day yet. If I reset the api key and reload the page the map is loading correctly again, but I don't wanna reset the api key again and again.
As you can see I am using a custom map, but I don't think that the code is the problem, but here is the code:
(function(window, google){
var infoWindow = null;
function init() {
var map;
var mapOptions = {
zoom: 12,
scrollwheel: false,
center: new google.maps.LatLng(
51.050409,
13.737262
),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById('map'),
mapOptions
);
setMarkers(map, locations);
infoWindow = new google.maps.InfoWindow({
content: "holding..."
});
}
function setMarkers(map, locations) {
var i, icon, marker, contentString;
for (i = 0; i < locations.length; i++) {
icon = '../Images/icn-marker.png';
contentString = '<div><b>' + locations[i][0] + '</b><br>' + locations[i][1] + '<br>' + locations[i][4] + '</div>';
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map,
title: locations[i][0],
icon: icon,
html: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(this.html);
infoWindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, 'load', init);
})(window, google);
Any my script include looks like the following:
<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY"></script>
<script src="http://example.de/example/map.js"></script>
Hope you can help, because I dont' know where the problem is.
The 403 error response indicate that your API key is not valid or was not included in the request. Please enxure that you have included the entire key and that you have enabled the API for this key.
Also, check your usage limit, if you exceed the usage limits or otherwise abuse the service, the web service will return a specific error message. If you continue to exceed limits, your access to the web service may be blocked. It is also possible to receive 403 Forbidden responses.
The problem can be address by combining two approaches:
Lowering usage, by optimizing applications to use the web services more efficiently.
Increasing usage limits, when possible, by purchasing additional allowance for your Google Maps API for Work license.
Note:
When requests fail, you should ensure that you retry requests with exponential backoff. For example, if a request fails once, retry after a second, if it fails again, retry after two seconds, then four seconds, and so on. This ensures that broken requests or wide scale failures do not flood Google’s servers, as many clients try to retry requests very quickly.
Here's a related SO ticket encountered 403 error response: Google static map API getting 403 forbidden when loading from img tag
function onPositionUpdate(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var markerPoint = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: markerPoint,
map: map,
title: 'Your Location'
});
}
function button_clicked() {
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(onPositionUpdate);
else
alert("navigator.geolocation is not available");
}
This code is running correctly and shows user location. when I try this at home this shows correct address but when I try this at another location this code doesn't show correct address. why? I dont know how this code run exactly(does this code define for IP or other information)
You can check if another program can find you. If not, it might be that its not your code which is incorrect:
http://html5demos.com/geo
Some security measures might cause that the client won't share location informations automatically.
Have you tried :
navigator.geolocation.getCurrentPosition(onPositionUpdate() );
Not sure if your callback has to have brackets or not. It's something I would try.
I also noticed that geolocation takes a little while to narrow down the approximation to a smaller radius. Might have to call position update.
A user comes to my web app and locates the destination address but he does not locate the source location and publishes the page. The normal user who are not registered to the web app adds the source location.
Once the user adds the source location he is not able to see the exact direction map, rather the google is displaying the default maps.
Here is the exception giving when we used chrome console.
I have added the code here and also the exception I am getting
Error Name:
main.js:41Uncaught TypeError:Object#<object> has no method 'Load'
function calcRoute() {
showDirections();
document.getElementById('directionsPanel').innerHTML="";
initialize();
var start = document.getElementById("txt_from").value;
var end = getDestinationAdderss(document.getElementById('final_address').innerHTML);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas_directions"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
You have removed some code that is present in the Google sample.
directionsDisplay = new google.maps.DirectionsRenderer({
'map': map,
'preserveViewport': true,
'draggable': true
});
I expect that your code is working again if you add the code above in the proper place. If not, you really should start with the sample code again, since that does work.
The debug screenshot indicates that initialize() is the last bit of code run in your file before Google Maps API throws the error. So look in there (and/or provide that code in your question).
UPDATE: Based on your code, the first to check might be to make sure that there is an element with an id of map_canvas_directions and another one with an id of directionsPanel. There's not enough information to say for sure, but if I had to guess, your UI changes got rid of one or the other of those elements, but your code requires them.
UPDATE TO THE UPDATE: Replacing the stuff in the DirectionsRenderer() constructor as #Arjan suggests is also a likely cause of your problem so definitely try that too!