How to pass parameter to a local html file from java - javascript

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>

Related

Linking Google Script Variable to the Javascript in HTML

So I feel I'm almost there to the solution but I'm really in need of help here. What I'm trying to do is to create an array using .getValues() to get a range that contains four columns (Name, Address, Latitude, and Longitude). After that I want to return the variable back into a global variable and then call that variable from the HTML side. I tried linking the google script with the HTML and then calling the variable there but having quite a bit of trouble with that. Thank you guys for all of your help!
Below is the google script:
var id = 'Spreadsheet Key';
function doGet(e) {
var html = HtmlService.createTemplateFromFile('Sample');
return html.evaluate().setTitle('Directory Map');
}
function entries() {
var blop =
SpreadsheetApp.openById(id).getSheetByName('Sheet1').getRange('A1:D').getValues();
return blop;
}
This is the HTML in Google Script.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script>
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.8283, lng: -98.5795},
zoom: 5,
mapTypeId: 'roadmap',
gestureHandling: 'greedy'
});
var locations = [blop];
for (var i = 0; i < locations.length; i++) {
var sites = locations[i];
var myLatLng = new google.maps.LatLng(sites[2],sites[3]);
var sites = new google.maps.Marker({
position: myLatLng,
map: map,
title: sites[0],
});
};
}
</script>
<script> google.script.run.entries(); </script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyAPIKey&libraries=places&callback=initAutocomplete"async defer></script>
<script src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="SampleCode.gs"></script>
</body>
</html>
The starting point is:
<script> google.script.run.entries(); </script>
The above code runs when the page is loaded in the browser. You need a "success handler", and then the success handler can store the data somewhere. You could put the data into a window variable, or local browser storage.
<script>
window.storeSheetValues = function(theReturnedData) {
console.log('theReturnedData: ' + theReturnedData)
console.log('typeof theReturnedData: ' + typeof theReturnedData)
window.mySheetData = theReturnedData;//Put the data into a window variable
}
google.script.run
.withSuccessHandler(storeSheetValues)
.entries();
</script>
Check the data type of the return value coming back from the server. If it's a string, you may want to turn it back into an array.

How to refer to a function in HTML?

I am making an html file that basically prints out the coordinates given by the user in a map. Whenever I click the submit button, it returns me an error of "UncaughtReferenceError: NewMap is not defined" i tried using an external javascript and inline javascript but it does not seem to solve the problem. Can you tell me what is wrong with the code?
<!DOCTYPE html>
<html>
<head>
<title>Find My Phone</title>
</head>
<body bgcolor="#2196F3">
<p style="font-size:150%; text-align:center">This is the extension for the app FindMyPhone. In this site, you can view the coordinates where your phone was traced on a map</p>
Latitude:
<input type="number" step="any" id="Lat"/> <br>
Longitude:
<input type="number" step="any" id="Lng"/> <br>
<button onclick="NewMap()">Submit</button>
<div id="map" style="height:500px;width:500px; color:#9E9E9E">
</div>
<script>
function NewMap() {
var mapCanvas = document.getElementById("map").value;
var Latitude = document.getElementById("Lat").value;
var Longitude = document.getElementById("Lng").value;
var mapOptions = {
center: document.getElementById("Lat, Lng")
zoom:15
}
var map = new.google.maps.Map (mapCanvas, mapOptions)
}
</script>
</body>
</html>
P.S: Supposing this code works, will it output the map correctly? Please also show me if it is right or wrong.
Include Google Map Library
You have missed out a comma after center property.
var mapOptions = {
center: document.getElementById("Lat, Lng"),
zoom:15
}

google map showing error - https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

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

Google Map markers not showing for locations loaded from database

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); %>;

Is it possible to set the Google Map key dynamically?

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>

Categories