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);
Related
Steps:
Create new Google API key
View page with a Google Place Photo in an img tag
Requested image is displayed
Add 'HTTP referrer' restriction to key: https://example.com/*
View page with a Google Place Photo in an img tag
403 response is returned instead of img
When using the same key for place autocomplete or for maps, everything still works fine. I would expect it to work fine with Place Photos as well, but it doesn't.
What might cause this issue?
The place autocomplete is a part of Google Maps JavaScript API, so an API key with HTTP referrer restriction works well.
The Google place photo is a part of Places API web service. The web services support only IP address restrictions, they will fail with HTTP referrer restrictions on API keys.
You can read which restriction is applicable for each API here:
https://developers.google.com/maps/faq#keysystem
If your intention is using place photos in JavaScript code, you can just obtain a place from autocomplete using getPlace method as shown in this example and loop through photos array of PlaceResult object.
The google.maps.places.PlacePhoto object provides the method getUrl() that returns URL of the place photo. Use this method to get the URL of image.
Have a look at documentation for further details:
https://developers.google.com/maps/documentation/javascript/reference#PlacePhoto
place.photos.forEach(function (placePhoto) {
var url = placePhoto.getUrl({
maxWidth: 600,
maxHeight: 400
});
});
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
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
Using the Google Maps v3 API, I cant understand why I get 'undefined' as the result of the below code when I am simply trying to remove a marker from a map?
Problem Example from Firebug Console:
>>> map
Object { gm_accessors_={...}, zoom=9, more...}
>>> markersList[1].visible
true
>>> markersList[1].setMap(null)
undefined
I'm assuming that markersList is an array of Google Maps Marker instances. When you invoke setMap(null) on a marker, the return value is undefined, just as you see it. You should also see the marker is now removed from your map page. You can see the same thing if you go to http://www.ecu.edu/campusmaps and use the console to reference myMarkers. Take myMarkers[0].setMap(null) and you'll see the result is undefined. Most importantly, you'll see that the Google Maps API reference for the Marker class shows a return value of "None".