I have a html file on my website domain (devodeliver.co.uk) which calls on my API Key with the code.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY-KEY"></script>
In the Developers Console I have tried adding every combination of my domain URL as you can see below
But when I load my site it shows the map for a millisecond then returns with the error "Google Maps API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error_.bb # MY-KEY:32" - basically saying I haven't given my website permission to access that API Key. But even if I don't set any referrers, it come back with the same error message. I've also waited way over 5 minutes for the API to take affect. Please, what am I doing wrong?! I've spent almost 16 hours trying to figure this out & I can't seem to for the life of me. HELPPPP!
Full HTML code:
<html>
<head>
<style type="text/css">
#map
{
height:400px;
width:400px;
display:block;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7-LTLEupUWBJBWl1GpOWPwkMvxzf8itQ"></script>
<script type="text/javascript">
function getPosition(callback) {
var geocoder = new google.maps.Geocoder();
var postcode = document.getElementById("postcode").value;
geocoder.geocode({'address': postcode}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
callback({
latt: results[0].geometry.location.lat(),
long: results[0].geometry.location.lng()
});
}
});
}
function setup_map(latitude, longitude) {
var _position = { lat: latitude, lng: longitude};
var mapOptions = {
zoom: 16,
center: _position
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: mapOptions.center,
map: map
});
}
window.onload = function() {
setup_map(51.5073509, -0.12775829999998223);
document.getElementById("form").onsubmit = function() {
getPosition(function(position){
var text = document.getElementById("text")
text.innerHTML = "Marker position: { Longitude: "+position.long+ ", Latitude:"+position.latt+" }";
setup_map(position.latt, position.long);
});
}
}
</script>
</head>
<body>
<form action="javascript:void(0)" id="form">
<input type="text" id="postcode" placeholder="Enter a postcode">
<input type="submit" value="Show me"/>
</form>
<div id="map"></div>
<div id="text"></div>
</body>
</html>
Here, when I tested it, it gives me the error "Google Maps API error: ApiNotActivatedMapError" on the JS console.
Take a look for this issue on: https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes
When you use a library or service via the Maps-Javascript-API, and use a key, you need to activate the Google Maps JavaScript API .
Make sure to activate the Google Maps JavaScript API for your project.
Also,
take a look on this other topic about Enable the Google Maps Jvascript API: Google Map error: InvalidKeyOrUnauthorizedURLMapError
Related
I am a novice at fusion tables and google maps APIs, so hopefully the answer is straight forward! I have used fusion tables to create a map of data points and added a search function.
However, the map only appears briefly before disappearing to be replaced by a "Sorry, something went wrong message". I have reviewed the code and can't work out where the error is.
Please could someone take a look and advise what needs to change?.
Here is the link to the page: https://www.enablie.co.uk/map-test/
My code is:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:800px; height:800px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(52.90081096506728, -0.8806991343750425),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col2",
from: "1LP8RhZ3QlYREIJB3e1xogaHWVmL8qxAUjKW1R6XE"
},
map: map,
styleId: 2,
templateId: 2
});
}
function changeMap_0() {
var whereClause;
var searchString = document.getElementById('search-string_0').value.replace(/'/g, "\\'");
if (searchString != '--Select--') {
whereClause = "'School Name' CONTAINS IGNORING CASE '" + searchString + "'";
}
layer_0.setOptions({
query: {
select: "col2",
from: "1LP8RhZ3QlYREIJB3e1xogaHWVmL8qxAUjKW1R6XE",
where: whereClause
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label class="layer-wizard-search-label">
School Name
<input type="text" id="search-string_0">
<input type="button" onclick="changeMap_0()" value="Search">
</label>
</div>
</body>
</html>
Where is your map init with AppId & AppSecret keys ? You must call Google App using this on init of your page (see this Google Map Api JS)
https://developers.google.com/maps/documentation/javascript/examples/map-simple
I am having problems embedding my query from google fusion into google sites. I have created the query and it works as a html file that has been saves in notepad, but when I go to put it in my Google Sites website it does not work.
The Query code is:
<html>
<head>
<style>
#map-canvas { width:850px; height:650px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(43.89591323557617, -79.77653503417969),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'col2'",
from: '1eMaZWdi5QhF1252KH2e7xOiNyJoBFOzpStMP-Ks'
},
map: map,
styleId: -1,
templateId: -1
});
}
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'col2'",
from: '1eMaZWdi5QhF1252KH2e7xOiNyJoBFOzpStMP-Ks',
where: "'description' CONTAINS IGNORING CASE '" + searchString + "'"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Land use:</label><input type="text" id="search-string-l0">
<input type="button" onclick="changeMapl0()" value="Search">
</div>
</body>
Have you tried using Google Gadgets to get your code to work in Sites? That is, put the code into a Google Gadget, and then adding the Gadget to your Sites Page via the Insert Menu in the Editor).
Start here, if you have not already:
https://developers.google.com/gadgets/
Another option is to use the HTML box, or making an Apps Script.
I want to get latitude and longitude of a city by providing the API with the city name. It should work for most cities regardless how the user inputs the city.
For example:
City can be 'miami, US' or city can be 'miami, united states'
How do I print its latitude?
You can find the code jsfiddled here : http://jsfiddle.net/YphZw/
or below :
$("#btn").click(function(){
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': 'miami, us'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng());
} else {
alert("Something got wrong " + status);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<input id="btn" type="button" value="search for miami coordinates" />
</body>
</html>
If you want more examples for the Javascript API, try this link : https://developers.google.com/maps/documentation/javascript/examples/
The code I wrote is inspired from the geocoding-simple sample.
Regards.
EDIT 1:
You can achieve it using an non-official PHP library. Check this example :
http://www.bradwedell.com/phpgooglemapapi/demos/geocoding.php
(The code is at the bottom=
You can use Google's geocoding service, e.g.,
http://maps.googleapis.com/maps/api/geocode/xml?address=Miami+FL&sensor=false
That gives you back georeferenced data in a variety of formats (JSON, XML, etc). In any event, the location is definitely in the returned data block.
The API docs are at:
https://developers.google.com/maps/documentation/geocoding/
Update per comment below: Doesn't work after July 2018.
This seems needlessly complicated. Here's an example "nearby events" map. It will take City, States, convert them to latLng coords, and put markers on a map:
// Nearby Events with Google Maps
window.nearbyEventsMap = () => {
const centerOfUS = {
lat: 37.09024,
lng: -95.712891
}
// Create a map object and specify the DOM element for display.
const map = new google.maps.Map(document.querySelector('#nearby_events_map'), {
center: centerOfUS,
scrollwheel: false,
zoom: 4
})
// Create a marker and set its position.
const geocoder = new google.maps.Geocoder()
// Filter out duplicate cityStates
let cityStates = {}
document.querySelectorAll('.nearby_event_city_state').forEach(event => {
cityStates[event] = event.innerText
})
// `cityState` is in the format of "City, State". It's not picky about state being a word or the abbreviation.
for (const cityState in cityStates) {
const location = cityStates[cityState]
geocoder.geocode({
address: location
}, function (results, status) {
if (status === 'OK') {
const result = results[0].geometry.location
const lat = result.lat()
const lng = result.lng()
const latLng = {
lat,
lng
}
return new google.maps.Marker({
map: map,
position: latLng
})
}
})
}
}
// /Nearby Events with Google Maps
Make sure to include your <script> tags.
<script src="/dist/js/main.js"></script>
<!-- We're loading this after the main.js script so the callback from main.js will be available to it. -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=nearbyEventsMap"></script>
StackOverflow please join everyone else and get GitHub markdown with syntax highlighting...
I'm trying to use the Google Maps geocoding service. I copied the code and it seems to find addresses fine (for example "13 Marine Terrace Aberystwyth") but not other places like "Rummers Wine Bar, Aberystwyth" even though the actual Google Maps website has no problem with them at all.
This is my code, slightly modified to be for the Aberystwyth area but otherwise copied form https://developers.google.com/maps/documentation/javascript/tutorial
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript"
/*you can use https if you want it secure!!! set java scrip sensor to true and read from gps!*/
src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXo-tdDimvjIs&sensor=false®ion=GB">
</script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(52.4156, -4.0829);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
function code ()
{document.write(results[0].geometry.location);}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="aberystwyth">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</script>
<script type="text/javascript">
code();
</script>
</body>
This is a link to it: http://users.aber.ac.uk/avh9/thesite/geocodeaber.html
Can anyone tell me why and how to fix it? or any alternative for geocoding....
There's a library called Places Library within Google Maps API. You can use its search() nearbySearch() or textSearch() methods to search for POIs and landmarks.
I'm showing a Google Map based on a street address supplied from an outside source.
My JavaScript is very simple, and I build the link like so
var googleMap = 'http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=' + address + '&ie=UTF8';
This is quick and easy, and works. But some of the incoming addresses aren't exactly addresses (they include some stuff which shouldn't be there).
When Google Maps can't make heads or tails of the address, it defaults to showing a map of USA. Unfortunately, I'm in Australia.
Is there any way using this lazy method to know if Google Maps couldn't match the address, or can I show Australia by default?
... or do I need to look at the API?
What about using maps.google.com.au? Note that the parameters might be a bit different.
http://maps.google.com.au/maps?q=Melbourne
http://maps.google.com.au/maps?q=Something-Garbage-That-Does-Not-Exist
You could also use the Maps API, as you suggested. Something like that would be very easy to do:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Geocoding Default Location</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
var address = 'Melbourne, Australia';
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: new google.maps.LatLng(-25.50, 135.00),
zoom: 3
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
map.setCenter(results[0].geometry.location);
}
});
</script>
</body>
</html>
Screenshot:
And another screenshot if you were to use address = 'Something Garbage That Does Not Exist':