We Keep Coding

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.

How can I avoid problems with Google Maps JavaScript API?

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

Google Maps SVG marker with PNG fallback

I've implemented the following code for a Google map with a custom SVG marker:
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
// create marker
var iconBase = 'http://localhost:8888/theme/wp-content/themes/bananas/images/';
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon : iconBase + 'marker.svg'
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
This works great, but I wondered if it's possible to add a PNG fallback for browsers that do not support SVG?
Maybe it's possible to display a div instead of an icon and then control the SVG detection with modernizr.

I realize this is an old question, but for anyone else who's pondering this: Sure you can! Create both svg and png icons in the same folder, and make the file extension into a variable, like so:
var imageType;
Then you can call it like this:
icon: '/your/folder/marker.' + imageType
This allows you to change file extension based on browser, like this:
if (!!navigator.userAgent.match(/Trident/g) === true) { //IE
imageType = 'png';
} else {
imageType = 'svg';
}
And voila! Crisp vector icons for modern retina displays, and reliable raster icons for your grandmother running Windows 7. :-)

I do not think Google Maps API would handle the fallback for you but,
You can handle it yourself using the Modernizr.svg function in the Modernizr plugin to check if the current browser support svg.
I have a sample in jsfiddle. and here is the direct link.
https://css-tricks.com/using-svg/#cp_embed_lCEux

How to highlight a user's current location in google maps?

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.

Google maps api v3, defining user current location

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.