I want to pass the key through url to iframe from parent window.
After fetching the data from URL I want to set it in the map src.
Is this possible?
Because it's working fine when I'm using this code-
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=4">
</script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
But if I try this way I'm not sure whether it's using the key or not. Without key also google map works.
I have put one console.log statement but it's not printing anything.
<!DOCTYPE html>
<html>
<head>
<script>
mapKey="45"
</script>
<script
src="http://maps.googleapis.com/maps/api/js?key="+mapKey>
console.log(mapKey)
</script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
javascript will not be parsed in HTML-attributes, create the script dynamically.
Example retrieving the key from the location.hash
<script type="text/javascript">
(function(key){
var url='https://maps.googleapis.com/maps/api/js?v=3&callback=initialize',
script=document.createElement('script');
if(key)url+='&key='+key;
script.setAttribute('src',url);
//load the API
document.getElementsByTagName('head')[0].appendChild(script)
}(
//get the key from the URL
location.hash.substr(1)
));
</script>
Note: remove this line
google.maps.event.addDomListener(window, 'load', initialize);
....the API will run initialize automatically
sample-iframe:
<iframe src="iframe.htm#yourmapsapikey"></iframe>
Related
I have a java client which receive from the server longitude and latitude and i need to send these coordinates as a parameter to an html file which is google map to locate these coordinates i need a way to open html file with passing parameters.
Thanks :)
here's the html code
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850), //coordinates
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>
i want to add my custom image in google map but page is not loading giving error saying MissingKeyMapError . i think i have to add authentication key but im unable to add authentication key
https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=xyzKey" type="text/javascript"></script>
<script>
var myCenter = new google.maps.LatLng(22.8046, 86.2029);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
icon:'dustbin3.png'
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:1500px;height:880px;"></div>
</body>
</html>
Add your api key in the script url
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>
Ref https://developers.google.com/maps/documentation/javascript/get-api-key
I am trying to use Google Maps API for my website with Node.js and mongodb. I have an express app on Node.js that fetches locations from mongodb. I have set up the map on my website. However, it is showing markers only for the locations hard coded in the Node.js code. Here, is the piece of code from routes.js
app.get('/website', function(req, res){
website.website(function(events){
res.render('website/index_page.ejs', {events : events});
});
});
The index_page.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<% include map_head %>
</head>
<body>
<h2>Events</h2>
<ol>
<%events.forEach(function(event){%>
<li><p><%= event %></p></li>
<%});%>
</ol>
<div id="googleMap" style="width:650px;height:700px;"></div>`
</body>
</html>`
And the map_head.ejs
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(10, 90),
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
events.forEach(function (event) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(Number(event.latitude), Number(event.longitude)),
map: map,
title: "test"
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The events object is only known to the server and its ejs parser.
The client does not receive the events object in the code you provided.
It only receives an "ol" list.
Your could include the events object in map_head.ejs with code like this:
var events=<%- JSON.stringify(events); %>;
I´m trying to put a google maps image into my HTML page. I cannot touch the <head> section as the page is dynamically loaded using PHP code (this logic is not explained here).
So, I´ve build the following HTML test code, that doesn´t work - the maps does not appear on screen.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<title>TEST PAGE</title>
</head>
<body>
<h1>Maps test page.</h1>
<script type="text/javascript">
function initialize() {
alert("Initialize");
var mapCanvas = document.getElementById("mapCanvas");
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
}
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addDomListener(window, "load", initialize);
}
window.onload = function() {
alert("Onload");
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js";
document.body.appendChild(script);
}
</script>
<div id="mapCanvas" style="width: 650px; height: 350px;"></div>";
<script type="text/javascript"> initialize() </script>
</body>
</html>
The alerts are coming up, but no map is shown...
Help is appreciated to make is work.
Asynchronously load the Google Maps Javascript API, use the callback parameter to run your initialize function.
working example
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<title>TEST PAGE</title>
</head>
<body>
<h1>Maps test page.</h1>
<script type="text/javascript">
function initialize() {
alert("Initialize");
var mapCanvas = document.getElementById("mapCanvas");
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
}
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addDomListener(window, "load", initialize);
}
window.onload = function() {
alert("Onload");
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
</script>
<div id="mapCanvas" style="width: 650px; height: 350px;"></div>";
</body>
</html>
The problem is that initialize() is getting executed before the Google Maps Javascript has been added to the page. You aren't importing the Google Maps JS until the DOM has finished loading, in your window.onload callback. Try this instead:
<div id="mapCanvas" style="width: 650px; height: 350px;"></div>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
alert("Initialize");
var mapCanvas = document.getElementById("mapCanvas");
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
window.onload = function() {
initialize();
};
</script>
I am trying to load Google Maps in my Javascript, but I keep getting the error 'document.body is null'. Can anybody help?
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?key=gfgfgfgfgfg"></script>
<script type="text/javascript">
$(document).ready(function () {
google.load('maps','3', {other_params: "sensor=false&callback=mapsLoaded&key=gfgfgfgfgf"});
});
function mapsLoaded()
{
alert("done");
}
</script>
For the version 3 of the API you should try a different approach:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>
<script type="text/javascript">
$(document).ready(function () {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
});
</script>
</head>
<body>
<div id='map_canvas' style="width:450px; height:450px"></div>
</body>
</html>
To get information of a certain position, and not drawing a map it is better to use Google's geocoding services:
ll = new google.maps.LatLng(-34.397, 150.644);
geocoder = new google.maps.Geocoder();
geocoder.geocode({ latLng: ll}, function(res, status){
console.log(status);
console.log(res);
});
For more details on other params please take a look at the API:
http://code.google.com/apis/maps/documentation/javascript/geocoding.html#GeocodingRequests
Hope it helps.
Move your script to inside the closing body tag:
<html>
<head>...</head>
<body>
...
<script> ... </script>
</body>
</html>