Google Maps API error: MissingKeyMapError,
but I have an API key, and pass it to js. Why it doesn't work?
<script src="https://maps.googleapis.com/maps/api/js?Key=MY_API_KEY&callback=myMap"></script>
and
<div id="googleMap" style="width:100%;height:380px;"></div>
<script>
function myMap() {
var mapProp = {
center: new google.maps.LatLng(30.331917,57.017670),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
</script>
my Test Page: http://shahrkharid.org/GoogleMap.html
Pic API key from Google
The parameter name is case sensitive. You should use key=... instead of Key=...
https://developers.google.com/maps/documentation/javascript/get-api-key
Related
I have a file in my pc named "GMPos.html", the file contains 1 marker:
<script src='https://maps.googleapis.com/maps/api/js?v=3.4&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'></script>
<script type="text/javascript">
var icon_shadow = new google.maps.MarkerImage('icons/mm_20_shadow.png',
new google.maps.Size(28,22),
new google.maps.Point(0,0),
new google.maps.Point(10,21));
var a_icon = new google.maps.MarkerImage('icons/mm_20_red.png',
new google.maps.Size(22,22),
new google.maps.Point(0,0));
var map;
function loadMap() {
var myLatLng = new google.maps.LatLng(14.60192,-90.53268);
var myOptions = {
center: myLatLng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: myLatLng,
icon: a_icon,
shadow: icon_shadow,
map: map,
title:'Id: GUA001'
});
}
</script>
When I try to open the file in Firefox, I got the following error:
"Google Maps API error: Google Maps API error:
RefererNotAllowedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: file:///C:/RunTime/Mss/GMH/GMPos.html"
So, I have added the following referres:
*C:/RunTime/Mss*
file:///C:/RunTime/Mss/GMH/GMPos.html
*file:///C:/RunTime/Mss/GMH/GMPos.html*
But still throws the same error, please help.
Thank you in advance
Please check your API quota restrictions connected to your key in the Google API Console. The marker API is considered a "Maps JavaScript API" restriction.
So Im working on my project and the user is to enter an address after its been created in the database, i want it to show in a google map. I've found out the coordinates for the map through this link :
http://www.codeproject.com/Tips/650139/Finding-Co-ordinates-of-an-Address-in-ASP-NET-Csha
However this link shows the coordinates as a label where as i have a java script method as follows :
<script type="text/javascript">
var myCenter = new google.maps.LatLng(1.303895, 103.831941);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The script works fine if i enter the coordinates myself. I've tried parsing the latitude and longitude through a label and using document.getElementById() method however the map does not show.
Any clue how i can solve this ?
I am trying to add geo-location to a custom public google map, I can't manage to get it to work. For example here is a custom public google map.
Lets say I wanted to add geo-targeting to that map. I have the following on the site which is directly off the google maps API website:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
as well as the following which I just changed '.getElementsById' to '.getElementsByClassName':
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementsByClassName('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Then I call for the map which is in a lightbox:
<h2 class="dis">Where can I<br />get Rumble?</h2>
It displays the map fine, and asks to geo-target but I assume the reason its not working on this map is because its not included in the API.
I was hoping someone had a solution for this.
This is not an API based map. You can display the KML from that map on an API based map
Then use your geolocation code to center the map (depending on the ordering, you might need to use the preserveViewport:true option on the KmlLayer). Relevant code below, see the documenation for more examples and information.
This is in your existing page (leave your version)
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
Add this to display the data from your "custom map":
var kmlLayer = new google.maps.KmlLayer("https://maps.google.ca/maps/ms?ie=UTF8&msa=0&output=kml&msid=202458571791405992786.0004b9061a3fcd9461d42");
kmlLayer.setMap(map);
How can I display a map in Google Closure. There seems to be many UI widgets but none for showing a map
I'm confused. Since Google Closure is a javascript library, can't you just use the Google Maps Javascript API? Something like:
<script type="text/javascript" src="http://maps.googleapis.com/maps/ap/js?sensor=set_to_true_or_false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
And then you can just change the document.getElementById() to whatever you need.
Reference: Google Maps Javascript API
Code with V3 API.
function initialize ()
{
if (GBrowserIsCompatible())
{
var ch = new GLatLng (0,0);
var myOptions = {
zoom:7,
center: ch,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay = new google.maps.DirectionsRenderer(map, document.getElementById("map"));
directionsDisplay.setMap(map);
}
}
Code with V2 API.
function initialize ()
{
if (GBrowserIsCompatible())
{
map = new GMap2 (document.getElementById("map"));
map.setCenter (new GLatLng(0,0),1 );
}
}
The V2 API code worked flawlessly, the V3 API code is NOt displaying any map.
What's the point that I am missing?
EDIT
Modified the V3 code as follows, but still no maps:
var chicago = new google.maps.LatLng (0, 0);
var myOptions = {
zoom:1,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
Make sure you are loading the correct Google Maps API, that you have a div tag with an id of map, and (for good measure) that you give the div a height and width. (Perhaps better to put the height and width in a stylesheet, but for clarity, I'm including it inline here.)
Here's a web page with your post-edit code. Try it. Works for me.
<html>
<head>
<title>Google Map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="height:500px;width:500px"></div>
<script>
var chicago = new google.maps.LatLng (0, 0);
var myOptions = {
zoom:1,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
</script>
</body>
</html>
In V3, all the names have changed. For example, GLatLng is now google.maps.LatLng. You will need to revise your code to use the new names.
A link to the docs in case you don't have it
There is no GLatLng in v3, change it to google.maps.LatLng
center: chicago,
I had the same symptoms, my v2 maps would not display with V3. When I look in the browser console logs, I'm seeing the error: Uncaught ReferencedError: GBrowserIsIncompatible is not defined.
Per the Google V2 to V3 Migration Guide, GBrowserIsIncompatible is no longer supported. I haven't found an alternative and just removed the logic related to this function. This site suggests just removing the function.
I found other problems with migrating which are addressed in the Google Migration Guide link above.
1- ensure your google map API key is correct.
2- it's may be not enabled in your google map console.
3- wrongly enabled the location API instead of the map API.