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!
Related
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.
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 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
I am using following code to get the location of user in phonegap (it works fine)
function getLocation() {
var win = function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var myOptions = {
center: myLatlng,
zoom: 7,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map_element = document.getElementById("displayMap");
var map = new google.maps.Map(map_element, myOptions);
};
var fail = function(e) {
alert('Error: ' + e);
};
var watchID = navigator.geolocation.getCurrentPosition(win, fail);
}
This is working fine by centering the user's current location on the map. But I would like to show an indicator (a red dot) on the user's location. But I can see that google API provide only 3 options center, zoom and mapTypeId.
Are there any available options that can be used to highlight the position or is there a workaround?
EDIT
Was able to find that google maps API has a marker ho highlight any position. That looks helpful, but that shows a default red balloon, can that be modified by a custom image?
You can use the newly released GeolocationMarker which is part of the Google Maps API Utility Library.
It will add a marker and accuracy circle at the user's current location. It also allows a developer to customize the marker using the setMarkerOptions method and specifying an icon property.
Use icon inside marker like
var Marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: "",
icon: /bluedot.png
});
you can use this google map location indication circular blue dot icon similar to the google map
You can use MarkerOptions to set a custom image. Check the Google Maps Javascript API V3 Reference to more details about Google Maps.
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.