Google maps API - how to check browser compatibility? - javascript

How do I check if google API v3 supports current browser? I need some function to do something like this:
if (!FUNCTION_I_AM_LOOKING_FOR()) {
alert('Sorry, your browser is not supported by Google Maps.');
return;
}
I wasn't able to find appropriate function in the API v3 reference

This functionality is currently not available in v3 (it is called GBrowserIsCompatible() in v2). There is an issue filed in the gmail-api-issues tracker.
Edit by OP: Also look here: Google Maps API v3 BrowserIsCompatible

Related

How to check if GA4 or Universal Analytics is installed?

I'm trying to detect on websites using Javascript if they have the new GA4 installed or the old Universal Analytics.
While for UA detection I can use typeof(ga) !== "undefined", not sure how to do this for GA4.
Based on information here: Seems to be using also ga? Any other difference that we can use on client side?
hy,
we use to do it like this for GA4:
if(typeof gtag === 'function' ){
gtag('event', 'myeventname',{
'event_category': 'myeventcategory'
});
}
please note that this will only work if you have GA4 tracking code installed directly in your page. if you use google tag manager, this won't work.
For detecting Google Analytics 4 (GA4) on a website, you can check for the existence of the gtag function, as GA4 uses the gtag.js library. Here's an example:
if (typeof gtag === "function") {
console.log("Google Analytics 4 is installed on this website.");
} else {
console.log("Google Analytics 4 is not installed on this website.");
}
Note that if both GA4 and Universal Analytics (UA) are installed on the same website, you will need to use the gtag function to send data to GA4 and the ga function to send data to UA. In that case, you will also need to make sure to send the data to the correct property by specifying the correct tracking ID.

restricting context path is not working for Google Maps API in JavaScript

My original URL for an application to call Google Maps API is something like "https://example.com/abc/def" and I am trying to restrict the context path by replacing it with https://example.com/*. I have looked into so many references but nothing worked. I am facing the below error whenever I try replacing with '*' in context path.
Google Maps JavaScript API error: UnauthorizedURLForClientIdMapError
If I give whole path, then the API is loading with out any errors.

Where to insert google map api key in wordpress theme

in my wordpress website i am getting this error for google map
Google Maps API error: MissingKeyMapError
now i have google map api key but i don't know where to insert it, i am not using google map plugin, i am using theme that contain build in google map, what i found now is the reference to google map javascript file that contain this code
var tl_geocoder;var $tl_map;var $tl_marker=false;jQuery(function(a){jQuery(document).ready(function(c){tl_geocoder=new google.maps.Geocoder();c(document).on("click",".layers-check-address",function(f){f.preventDefault();$tl_map=c(this).closest(".layers-map");var g=c(this).closest(".layers-content").find('input[id$="google_maps_location"]').val();var d=c(this).closest(".layers-content").find('input[id$="google_maps_long_lat"]').val();$tl_map.data("location",g.toString());$tl_map.data("longlat",d.toString());b(c)});b(c)});function b(d){var c=false;jQuery(".layers-map").each(function(){var h=d(this);var k=(undefined!==h.data("longlat"))?h.data("longlat"):null;if(null!==k){var l=k.split(",");var m=l[0];var e=l[1]}else{var m="-34.397";var e="150.644"}var f=new google.maps.LatLng(m,e);var j=h.data("zoom-level");$tl_map=new google.maps.Map(h[0],{scrollwheel:false,zoom:j,center:f,mapTypeId:google.maps.MapTypeId.ROADMAP});var g=!d(this).closest("div.layers-contact-widget").hasClass("no-infobox");if(undefined!==h.data("longlat")){var n=new google.maps.LatLng(m,e);$tl_map.setCenter(f);$tl_marker=new google.maps.Marker({map:$tl_map,position:n,zIndex:google.maps.Marker.MAX_ZINDEX+1,icon:TL_CONF.themeurl+"/assets/images/google-marker.png"});if(!c&&g){c=true;d("body").trigger("setInfobox")}else{$tl_marker.setMap($tl_map)}}if(undefined!==h.data("location")&&$tl_marker===false){var i=h.data("location");tl_geocoder.geocode({address:i},function(p,o){if(o==google.maps.GeocoderStatus.OK){$tl_map.setCenter((p[0].geometry.location?p[0].geometry.location:f));$tl_marker=new google.maps.Marker({map:$tl_map,zIndex:google.maps.Marker.MAX_ZINDEX+1,position:(p[0].geometry.location?p[0].geometry.location:f),icon:TL_CONF.themeurl+"/assets/images/google-marker.png"});if(!c&&g){c=true;d("body").trigger("setInfobox")}else{$tl_marker.setMap($tl_map)}}})}})}}(jQuery));
but i am still not sure where to insert google map api key
IIRC, Google maps introduced the api key usage as a recent update and the theme you're using has the older version of the api, one that does not use the api key.
You should check for an update of the theme. If it is an active one, the developer should have incorporated the api key mechanism by now so that you can provide the api key directly somewhere under the theme settings (in wp-admin).
If not, you can try with any of the available Google Maps plugins. I know for a fact that some such plugins work without an api key even today, e.g. the SiteOrigin Widgets Bundle ver. 1.6.1:
https://wordpress.org/plugins/so-widgets-bundle/developers/

Google Maps API warning: SensorNotRequired

On the site https://gearbottle.com/ I am having an issue where the map will load my geolocation (enable geolocation to see) and then load all results (the entire world) - I need this to stay at the geolocation and not jump to the entire map.
After checking out the console I see "Google Maps API warning: SensorNotRequired //developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required" and then a dropdown of Object etc....After digging a bit i came across the following scripts that still have the sensors in place:
if(ddp('google_places_api')) { if(ddp('google_places_api') != '') { wp_register_script('google_maps_api', 'https://maps.googleapis.com/maps/api/js?key='.ddp('google_places_api').'&sensor=false&libraries=places'); } }
else { wp_register_script('google_maps_api', 'https://maps.googleapis.com/maps/api/js?'); }
}
$google_places_url = 'https://maps.googleapis.com/maps/api/place/autocomplete/xml?key='.ddp('google_places_api').'&sensor=false&input='.$fields[$field->post_name].'&types=(regions)';
$reference_url = 'https://maps.googleapis.com/maps/api/place/details/xml?key='.ddp('google_places_api').'&sensor=false&reference='.$place_reference;
....but I am clueless on what to replace the "Sensor" part in each script to or if this even matters - I really just need the map to stop jumping and that's really it.
This is an older version of a theme that has been reconstructed (purchased by choice)- there is no longer support from original devs, so I am attempting to fix things on my own.
As per the documentation on Google Map Error Codes for SensorNotRequired
The sensor parameter is no longer required for the Google Maps
JavaScript API. It won't prevent the Google Maps JavaScript API from
working correctly, but we recommend that you remove the sensor
parameter from the script element.
It is a warning and you can safely remove &sensor=false from the urls

RequireJS - Google Maps & Marker Manager Plugin

I'm working on a site using Require js and I need to implement Google Maps. I'm also using the Marker Manager Google Maps plugin.
I'm using the async Require plugin to load Google Maps api but I'm having a problem with the marker-manager plugin. It's firing before Google Maps Api has loaded (see below).
How can I get marker-manager to wait until Google Maps api has loaded if it loads asynchronously?
Thanks,
Scott
define(['marker-manager',
'async!https://maps.google.com/maps/api/js?sensor=false'],
function (mm, gapi) {
// yadda, yadda
console.log("Finished loading");
});
console output:
Uncaught ReferenceError: google is not defined
["Finished loading"]
You should try to specify callback function in the google maps define statement. Example:
https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
Reason: Google Maps loads many JS files asynchronously, so listening just to the first script load isn't enough to check.
Another example with google maps callback and requirejs integration:
http://blog.pixelingene.com/2011/10/using-jquery-dot-deferred-and-requirejs-to-lazy-load-google-maps-api/
In summary:
- Abstract the google maps API with a wrapper object
- Create a single $.Deferred() object
- Queue up calls on the maps API by wrapping the code inside done()
- Use the async loading option of google maps api with a callback
- In the maps callback, call resolve() on the deferred object

Categories

Resources