I'm implementing a map but I'm getting an error response and don't understand why it is not working.
Here is my attempt.
var map;
function loadMap(){
// Variable Definitions
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(37.9835464,23.7269264)
}
var mapid = document.getElementById('map');
// Function call
map = new google.maps.Map(mapid,mapOptions)
}
google.maps.event.addDomListener(window,'load',loadMap())
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px;
}
#map {
width: 500px;
height: 400px;
}
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<link rel="stylesheet" media="screen" href="style.css">
</head>
<body>
<div id="map"></div>
<script src="https://maps.google.com/maps/api/js?v=3?key=API_KEY"></script>
<!-- Script tag -->
<script src="script.js" type="text/javascript"></script>
</body>
In order to find a solution, I checked the console which gives me the error:
"Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error"
So I checked the documentation, but my API key seems to be right.
Any suggestion?
Thanks in advance.
You have a typo in your script include:
https://maps.google.com/maps/api/js?v=3?key=KEY
Should be:
https://maps.google.com/maps/api/js?v=3&key=KEY
(Start with question mark, then separate parameters with &)
Related
my code:
(i used ArcGIS for the map code https://developers.arcgis.com/javascript/3/jssamples/widget_locate.html )
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>OpenStreetMap</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
<style>
html, body, #esri-map-container {
padding: 0px;
margin: 0px;
height: 100%;
width: 800px;
height: 500px;
}
#LocateButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
</style>
<script src="https://js.arcgis.com/3.35/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/LocateButton",
"dojo/domReady!"
], function(Map, LocateButton)
{
map = new Map("map", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
geoLocate.on('locate', (data) => {
console.log(data);
});
});
</script>
</head>
<body>
<div id="map" class="map">
<div id="LocateButton"></div>
</body>
</html>
So i get coordinates with:
geoLocate.on('locate', (data) => {
console.log(data);
});
and then i want to convert them into an address.
with the address i want to give them information about the city they live in.
since i want to get an address on my specific country (Israel)
which is not big, the idea is maybe to write a table with longitude and latitude and the main citys
and when some user use his locate button, i will find which from the table is the closest to him, and then return the data i already written in a table or something like this
so my question is:
is there a way to convert my long and latitude to the address with what i have written? or maybe is it better for me to do the second idea with prewritten data.
i don't know how to do those, so i would like to get some directions on where to start or how to look for it.
thanks.
In your second method, you have to use rectangular boundaries of all cities, you can search for it.
but if you want direct from long lat to location.
use google map cloud APIs, visit their website to learn more.
everyone, I have uploaded my google map KML file to my website then I have used google map javascript API key. if you notice once you run the map you will see all my markers in white( transparent ) is there a way to have my map exactly the same way like I had it before saving. the code below, Thank you in advance:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(35.5715, -97.66704),
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://rogerslimos.com/KML.kml',
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
I am trying to use google maps JS API v3 in one of my projects everything was working fine until day before yesterday, then suddenly it stopped working when i tried to debug using console it showed that the url for loading map script main.js was failing
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key={API_KEY}&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
I have used a real API key in place of {API_KEY}
How can I achieve my objective?
I pasted your code into a file named test.html, inserted a valid api key and tested the following browsers in MAC OS X 10.9:
Safari
Chrome
Firefox
It works in all these browser without any error. Please check the following:
Validation period of your api key
invisible characters
Trying to replicate Google's "Hello World" for Google Maps. Here is my cljs code:
(ns myapp.core)
(def *map* nil)
(def my-opts
{"zoom" 8
"mapTypeId" google.maps.MapTypeId.ROADMAP
"center" (google.maps.LatLng. -34.397, 150.644)})
(defn map-load []
(let [elem (.getElementById js/document "map-canvas")]
(set! *map* (google.maps.Map. elem my-opts))))
(google.maps.event.addDomListener js/window "load" map-load)
And the HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
</head>
<body>
<div id="map-canvas" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script src="myapp.js" type="text/javascript"></script>
<script type="text/javascript">goog.require("myapp.core");</script>
</body>
</html>
This yields a blank, slightly brownish screen and no errors. But no map displays.
Here is the Google Hello World code, which works fine. I cannot figure out the difference between the two.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
</head>
<body>
<div id="map-canvas"/>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
as you can see in Himera, when you need interoperability you have to perform some translations between js and clj, through js->clj or clj->js functions
;; ClojureScript records aren't exactly
;; compatible with pure JavaScript
;;
;; Enhance JavaScript objects to ClojureScript
;; records for additional capabilities.
;;
;; Then do something on each element.
;;
;; Then convert back to plain JavaScript.
(defn get-names [people]
(let [people (js->clj people)
names (map "name" people)]
(clj->js names)))
Then, you only have to change this line
(set! *map* (google.maps.Map. elem my-opts))
for this other
(set! *map* (google.maps.Map. elem (clj->js my-opts)))
And I've found out an interesting project about cljs and gmaps maybe it helps you
How can I use Google Maps API to show me a full screen map with no sidebars or search bar? I just need it to show a specific location in a mobile app, users don't need to search. Is this possible?
Also if I provide a street address how can it put a push-pin at the location?
Assuming you are planning to use the v3 API, you may want to check the following section of the documentation:
Developing for Mobile Devices (iPhone and Android device)
As for your second question, you can use Geocoding. Consider the following simple example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Geocoding Demo</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var address = 'Oxford Street, London, UK';
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 12
});
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);
}
else {
// Google couldn't geocode this request. Handle appropriately.
}
});
</script>
</body>
</html>
Screenshot: