Geolocation with Google Map V3 - javascript

I would like to add geolocation to the mobile version of my
map located at http://alert.fcd.maricopa.gov/alert/Google/v3/mobile.html.
My map loads through this JavaScript file
http://alert.fcd.maricopa.gov/alert/Google/v3/js/mobilemap_v3.js. You
will notice that line 46 of this file is -
map = new google.maps.Map($('#map_canvas')[0],myOptions);
I have tried the Geolocation example at https://developers.google.com/maps/documentation/javascript/examples/map-geolocation and the W3 HTML5 Geolocation method at http://www.w3schools.com/html/html5_geolocation.asp. But my map loads through jquery and doesn’t use
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
like all the examples.
I can get the geolocation to work if I replace the $ in line 46 with
document.getElementById but then none of my sensors/makers will
display.
Does anyone know how I could get the geolocation working with my
markers/data still loading?

Found an answer to this! I used geolocationmarker-compiled.js (at http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/geolocationmarker/src/geolocationmarker-compiled.js?r=379) and then added
var GeoMarker;
GeoMarker = new GeolocationMarker();
GeoMarker.setCircleOptions({
fillColor: '#808080'});
google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
map.setCenter(this.getPosition());
map.fitBounds(this.getBounds());
});
google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
alert('There was an error obtaining your position. Message: ' + e.message);
});
GeoMarker.setMap(map);
and it works great. Mobile map with Geolocation working is located at http://alert.fcd.maricopa.gov/alert/Google/v3/mobile.html and the geolocation code in in the mobilemap_v3.js file if anyone is looking to do the same thing.

Related

Sorry, we have no imagery here - Google Satellite Map

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.

Google Maps Javascript API not working on mobile site

I'm building a site for a customer who wants a map on their "About Us" page showing their locations. I have the map working and fully functional on the desktop site (www.al-van.org/jake/aboutUs.html) using the Google Maps Javascript API. Everything is going good but when I try to view the site on my android device, I just get an "Oops something went wrong see the error console for more technical information" which doesn't help me a whole lot. I can't seem to figure out what is going on and why it won't work on mobile. I need to use the Javascript API because the client wants 2 locations on the map and the embed api won't do that. Here is my JS, the HTML is a simple div with a bootstrap framework.
<script>
function initMap()
{
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: {lat: 42.389795, lng: -86.258617},
styles: [
{elementType: 'geometry'},
{elementType: 'labels.text.stroke'},
{elementType: 'labels.text.fill'}
]
});
// array used to label markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {imagePath:
'googlemaps/m'});
}
var locations = [
{lat: 42.390337, lng: -86.259642},
{lat: 42.388635, lng: -86.257246}
]
</script>
<script src="googlemaps/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?
key=API_KEY&callback=initMap"></script>
After working with Google Support, it seems that the issue is in the way that the android Chrome puts in the website. I had explicitly set my allowed HTTP referrers all including www.blahblahblah.com and various variations using wildcards. What I DID NOT DO was include a wildcard in place of the "www" When I placed my wildcard as blahblah.com it allowed it to work on the mobile phone. For some reason, unless you explicitly type "www.example.com" into your android Chrome browser, it will not auto-fill the "www." This is what solved my issue, I hope it helps in the future.
Your API key is invalid for the domain, or is over it's quota limit.
Go here: https://developers.google.com/maps/documentation/javascript/get-api-key
To get an API key for the domain you are using.

Google Map Auto-complete not working

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/*

KML layer not loading on Google Maps

normally I don't post with a help plea but I'm seriously at a loss... I have a KML layer that I want to load on an embedded Google Map. It worked fine for a few months but about three weeks ago, the KML data vanished. Upon validating my KML file I found two insignificant errors:
line 6, column 9: Invalid value for scale: .5 [help]
<scale>.5</scale>
^
line 774, column 26: XML parsing error: <unknown>:774:26: undefined entity [help]
<name>Brabant Bar and Café</name>
I've looking for JavaScript errors and found none (Chrome's console seems to agree with me).
I've looked for changed in the V3 API and found none
I've verified my API key
I've verified other KML files work
Any help is greatly appreciated. I have a codepen demo that has a link to the KML file, a working embedded google map using the V3 API, and a known working KML file from Google. Below is the JavaScript I am using to control the map and KML overlay:
var map;
var src = "http://kingsofthecraft.com/sandiego.kml"; // does not work
// var src ="http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml"; // known to work
function init() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(32.945048, -117.243135),
zoom: 9,
mapTypeId: google.maps.Map.ROADMAP
});
loadKmlLayer();
}
function loadKmlLayer() {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: false,
preserveViewport: false,
map: map
});
}
google.maps.event.addDomListener(window, 'load', init);
you wrote:
I found two insignificant errors:
line 774, column 26: XML parsing error: :774:26: undefined entity [help]
<name>Brabant Bar and Café</name>
XML parsing errors are major problems with XML. XML parsers fail on them. If you encode your entities correctly, it works.
<Placemark id="placemark19147">
<name>Brabant Bar and Caf&Atilde;&copy;</name>
<styleUrl>#Beer Bar</styleUrl>
<description><![CDATA[
Brabant Bar and Caf&Atilde;&copy;<br />
Beer Bar<br />
San Diego, CA 92104<br />
United States<br />
]]></description>

HTML 5 Issues with showing google map

I have been looking at the google maps html5/javascript code and am attempting to make a app which finds someone current location through longitude and latitude then geo reverses it to give then their address. However when i run the code it just gives a blank screen. I am really new to html5 and if anyone could point to me what i am doing wrong i would be really grateful.
the error is geocoder = new google.maps.Geocoder(): must be geocoder = new google.maps.Geocoder();
By default, navigator.geolocation.getCurrentPosition() has a timeout value of infinite. In the getCurrentPosition's options parameter, specify a timeout value and I think you will find that is where your error lies.
... }, function() {
handleNoGeolocation(true);
}, { timeout: 4000 });

Categories