I have an existing project that uses MooTools that I would like to add a Bing Map to. I've discovered, however, that MooTools breaks Bing Maps. I'm kind of at a loss of how to fix this. Here is a jsfiddle that shows the problem. If you watch your console when you click the Run button, you'll see that Bing throws an exception
Uncaught TypeError: n.open is not a function
If you then disable MooTools, and hit run again, you'll see the map appears in the results pane.
How do I get past this? Is this a bug?--in Bing or in MooTools?
The existing project that I have uses MooTools 1.3.2, but the issue shows up even in 1.6.0.
Turns out MooTools breaks Bing Maps API loading since it extends Element object with send method:
Element.implement({
send: function(url){
var sender = this.get('send');
sender.send({data: this, url: url || sender.options.url});
return this;
}
});
Bing Maps library internally has the dependency to the same method used for loading suplementary library files. `
A workaround would be to remove MooTools specific method:
delete Element.prototype.send;
Demo: plunker
Related
When displaying a Google Map with Maps JavaScript API v3 activated, the default "Map" view works well, but the "Satellite" view does not : The image tiles read "Sorry, we have no imagery here".
I have two versions of the map : The public version works well either in Map mode or Satellite mode.
The private version, that requires login and allows for editing the custom stuff loaded onto the map, is the one that says "no imagery here" but only in Satellite mode.
When in private mode for editing, here is an example of working Map view :
Here is an example of broken Satellite view :
When looking at the Javascript console, here is what I find :
GET https://khms1.googleapis.com/kh => Error 400 Bad Request
But the request is sent by Google's own js code.
My web app has been working fine for years until I noticed this.
In case you are using a prototype js library, check in your developer console if you are receiving an error from Array.from function, if so, fix this bug in the overrided function or just comment it (at least to test it).
I had the same issue. I tried every available solution on the internet. Turns out Google tag manager was the culprit. How did I come to this conclusion? I opened the network tab in chrome and blocked all the js files from loading. I enabled them one by one and checked if satellite view was loading. For me Google tag manager js file was causing the issue.
i've got this error message in the console. can anyone explain why? and the page is running as it should be.
js?key=MyAPIKey&v=3.exp&libraries=places,drawing,geometry:32 InvalidValueError: not an instance of HTMLInputElement_.ab # js?key=MyAPIKey&v=3.exp&libraries=places,drawing,geometry:32
InvalidValueError: not an instance of `HTMLInputElement`
That's mean you have not set proper id of your html input element.
Google API not able to find that control in your html code. Because of wrong id of input element.
If you using textarea then it will not work because google maps autocomplete now supports only window.HTMLInputElement(input tags)
For more details Please Check this Link
You can also find examples here of Google Map API
Add Google Api CDN after the callback function
eg.
function initMap() {
//
}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
I also got this error when i use google map autocomplete.
InvalidValueError: not an instance of `HTMLInputElement`
So i solve this as like .
var org = document.getElementById('origin');
new google.maps.places.Autocomplete(org, options);
I want to create a GAS standalone web app that will have a google map embedded. Visitors will see their location, drag around and will be able to pin details that can be seen by other users. User clicks on a point, a custom form pops, they fill and submit for admin approval. Can we make it happen?
Unfortunately, now it is impossible to implement an application required by you neither using the Ui nor Html Services. The Ui Service can produce only static map bitmaps without ability to drag/scroll, zoom, markers selection, etc. And the Html Service cannot correctly handle the Google Maps Javascript API because the Caja sanitizer, at least, complains once trying to compile any Maps API Sample by outputting the FATAL_ERROR js?sensor=false:13+3 - 15+4: Properties cannot end in "__": Rule "setBadSuffix",... message. There is a proper feature request on the Issue Tracker. Please star it to promote this topic to the developers.
Maps support is planned for HTML service. Stay tuned.
This is still not supported. Same error is returned for html service. The issue occurs as soon as you try to include the Maps API with:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
Is there a way to use the native iOS Google Maps app from within a PhoneGap/Cordova application? Or do I have to use a JavaScript version? I am trying to feed an address to a map as well as retain the ability for the users to user their GPS to obtain their location
Have you had a look at the plugins on Github ?
There is a Mapkit plugin : https://github.com/phonegap/phonegap-plugins/tree/master/iOS
You'll still have to request your GPS location using the API (I think)
Of course this might change when Apple Maps in IOS6 comes out.
There is a quite simple way to do this, here is a sample code
$("#btnCallMap").click(function(){
var url = 'http://maps.google.com/maps?';
url += 'q=<your location>;';
url += '&z=15'
window.location = url;
});
You could do this from a jquery button click event as shown.
Hope it helped you.
-- Mejo
What I do is I go to a location in Google Maps (either by searching or just by dragging the map). Now I enter another URL in the addressbar and hit return to go to that site.
When I use the browser Back-Button, google Maps automatically switches back to the location I was last in.
How is this done if I dragged the map and didn't use some kind of "POST" on the Google Maps site? I would like to have the same behaviour in my own google Google Maps App.
I'm using Google Maps API for JavaScript v3
I don't know if GMaps has convenience method for this, but generally such functionality is based on HTML5 history.pushState() which lets you add custom steps to navigation history and observe when user navigates back:
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
If you want to handle more advanced application states this way, there are several frameworks built on top of it, e.g. Backbone router, LeviRoutes.
In HTML4 browsers pushState can be emulated with fragment identifiers (hash URLs).
First of all you just look for an event called 'dragend' on your map
google.maps.event.addListener(map, 'dragend', function() {
});
Then you need to get your coordinates using getCenter() and redirect your browser to '#coordinates' it won't reload your window as you use hash, but it will save it in history.
coords = map.getCenter();
window.location = '#' + encodeURI(coords);
Now you need to add listener to check for any 'hash' changes in an URL (assuming you have jQuery)
$(window).bind('hashchange', function () {
var hash = window.location.hash.slice(1);
});
At the end you need to tell your map to change coordinates and decode url
hash = decodeURL(hash);
map.panTo(hash);
Instead of panTo() you could use setCenter(), but it add some nice animation while clicking Back button.
It is very easy to change this code to work with your searched place, you can use event 'center_changed' instead of 'dragend' and it will handle everything.
Everything I wrote about is covered here:
https://developers.google.com/maps/documentation/javascript/reference#Map
Hope this helps you.