I am using bing map in my application for searching.
Bing map V8 control.
I have used this CDN
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=api_key' async defer></script>
after that when I am trying to use Microsoft.Maps. It is saying:
Uncaught ReferenceError: Microsoft is not defined
new Microsoft.Maps.Color(100,100,0,100);
Any one have idea about this?
Don't use async while loading Bing API,
<script src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=api_key'
type='text/javascript' ></script>
And if you are using jQuery then add $.ready() to use maps like
<script>
$(function(){
var color = new Microsoft.Maps.Color(100,100,0,100);
....
});
</script>
I encountered a similar error while using bing maps js sdk. All you have to do is to add 'windows.' before you write: Microsoft.Maps.Color(100,100,0,100);
So now the new code is :
new window.Microsoft.Maps.Color(100,100,0,100);
Related
I have the following script in my HTML head element.
<script src="" id="mapScriptID" type="text/javascript"></script>
<script type="text/javascript">
var resloc = "http://maps.google.com/maps/api/js?sensor=true&key="+key;
var mapScript = document.getElementById('mapScriptID');
mapScript.src = resloc;
</script>
The reason for it is that I would like the key value for the google map api to be defined in once only as I am using it in multiple places in my application. So that in the future when the key value changes I only have to change it in one place. But now for some reason the application is not seeing the google map api anymore. It's giving me 'google is not defined' message when I call google.maps.LatLng(....);
it previously used to be
<script src="http://maps.google.com/maps/api/js?sensor=true&key=xxxxxxxxxxxxxxxxxxxxxxxx" type="text/javascript"></script>
And it worked completely fine.
After trying multiple solutions. Eventually I used JQuery's $.getScript() method which worked sufficiently well in my scenario.
I'm struggling with adding Google Maps JS API to my Angular project.
In index.htm I have:
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"
async defer></script>
In my component, how is it possible to know that the maps api is fully loaded and available?
To be clear, for example, in Google Charts API, we can call:
google.charts.setOnLoadCallback();
to initiate other functions.
You can try using the onload event in you script tag:
example(https://codepen.io/larryjoelane/pen/BJmOxB?editors=1112):
<script>
function jsFileLoaded() {
console.log('file loaded!');
}
</script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" onload="jsFileLoaded()" async defer></script>
I am trying the below code for implementing Google Maps Autocomplete text box in HTML
HTML:
<head>
...
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
...
</head>
<body>
...
<input type="" name="loc" class="form-control" id="location" value="">
...
</body>
JavaScript:
<script>
function init() {
var input = document.getElementById('location');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
The above code is working fine if I open HTML file in normal browser without using any server or local host. When I use the same code on local host, and click the text box, text box gets disabled automatically and throws the below error:
Google Maps API error: MissingKeyMapError js?v=3.exp&sensor=false&libraries=places:34
I was referring to this document ERROR: Google Maps API error: MissingKeyMapError and it says usage of the Google Maps APIs now requires a key after June 22 2016. I created key and used the library as mentioned in the document https://developers.google.com/maps/documentation/javascript/get-api-key but had no luck as the textbox is not picking the library.
Tried below library replacing YOUR_API_KEY with the key generated for me:
<script async defer src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
When I use this library, it is not at all picking any location, and text box is showing empty.
I am getting this issue only when I use the Google API on a local host. Could someone help me how to get rid of this error?
After generation of key, what is the exact library that should be used?
I am getting the below error after using the below two libraries:
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry,places">
<script async defer src="https://maps.googleapis.com/maps/api/js? libraries=places&key=API_KEY&callback=initMap"
type="text/javascript">
Error:
Uncaught js? libraries=places&key=AIzaSyAI_DaubDzVzYzVoVJ83Pc_KJAMd0HeNlQ&callback=initMap:95 InvalidValueError: initMap is not a function
I am using the same javascript code as mentioned earlier.
You need to include both the key (with localhost as an allowed referrer) and the places library.
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
from the documentation on libraries:
The following bootstrap request illustrates how to request the google.maps.geometry library of the Maps Javascript API:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
</script>
I am using the GMaps.js library and the code I am using is working 100% fine (running locally on localhost) - the 'webapp' I have created also uses the Google Maps Geocoding API.
I cannot see where I add my API keys anywhere within my code - although I am kinda confused as it currently works? Surely it should only work with a valid API key.
https://hpneo.github.io/gmaps/
<!DOCTYPE html>
<html>
<head>
<link href='example.css' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="style/style.css">
<script type="text/javascript" src="gmaps.js"></script>
<script type="text/javascript">
map = new GMaps({
div: '#map',
lat: 52.4801,
lng: -1.8835,
zoom: 7
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE" type="text/javascript"></script>
Replace the placeholder text in the above snippet with your gmaps api key and insert in your header above the gmaps.js script.
By viewing the example codes, no API key is used. So I would guess you don't need one.
Although you could supply google with a API key when embedding the maps api
Ok - i have found the answer here:
When is a Google Maps API key required?
In a nutshell version 3 doesn't require an API (v2 did) but it is recommended from what other developer are saying in regards to setting them up.
I searched and tried but failed
I am using an older version of ez realty which seems to call google maps with this code:
<script src="http://maps.google.com/maps?file=api&v=2.x&key=<?php echo $config->er_mapapi;?>" type="text/javascript"></script>
which now produces a grey rectangle but no map anymore
Tried to replace that with v3 googlemap api :
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=<?php echo $config->er_mapapi;?>&sensor=false"></script>
but that just produces a white area where the map used to be, so obviously not calling the map right.
It is not mandatory to provide a key if you are within free usage limits.
Try to include it like this:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>