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
Related
I was using the old analytics.js to insert Google Analytics on my website. But now I'm trying to upgrade to Google Site Tag (GTAG). I understand that GTAG is just a wrapper for Google Analytics and the same analytics.js is being loaded by GTAG. I have quite a few custom event functions written using the ga() function that analytics.js provided. They were working fine with analytics.js but with GTAG I no longer can use those. GTAG has its own gtag() functions and if I try to use ga() function with GTAG, I get the "ga is not defined" error.
My question is, how can or even can I use the old ga() functions with GTAG without having to update the code.
It seems that GTag somehow uses ga() function after all: After I inserted the new GTag code and removed old Google Analytics code, I also tried to deactivate old GA custom events that may existed at various points of my website, by defining a "trap" function for ga() calls:
function ga(){
return false;
}
However, this resulted to making GTag not working properly (gtag() functions did not work).
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.
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/
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
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