This question already has answers here:
Pass parameters to a url callback function in JavaScript
(3 answers)
Call function initmap with parameters in gmaps api
(2 answers)
Closed 6 months ago.
I am using the example from this document as reference. https://developers.google.com/maps/documentation/javascript/examples/layer-traffic
Basically, I have a html file and an external js file.
<!DOCTYPE html>
<html>
<head>
<title>Transit Layer</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap(51.501904,-0.115871)&v=weekly"
></script>
</body>
</html>
External js script:
function initMap(lat, lon) {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 13,
center: { lat: lat, lng: lon },
});
const transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
}
window.initMap = initMap;
How do I pass arguments initMap(51.501904,-0.115871) to the js function from html? I tried this in jsfiddle and it didn't work.
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>
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.
If initMap function is let or const it won't work and throw error:
Qb {message: "initMap is not a function", name: "InvalidValueError"}
If I replace it with var, it works fine. Why is that?
Here is my code.
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
const initMap = function () {//THIS LINE
// Create a map object and specify the DOM element for display.
let map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
};
</script>
<!--map API-->
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_HERE&callback=initMap"
async defer></script>
</head>
<body>
<!--header ends-->
<div class="container">
<div class="row">
<div class="map-wrapper">
<div id="map" style="height: 300px; width: 600px"></div>
</div>
</div>
</div>
</body>
</html>
That is because const and let variables do not become properties of window.
This declaration creates a constant whose scope can be either global or local to the block in which it is declared. Global constants do not become properties of the window object, unlike var variables.
You can read more about it HERE
This question already has answers here:
Angular Js and google api client.js (gapi)
(8 answers)
Closed 6 years ago.
I am really new to Angular. I am trying to execute my code defined in a controller in my app.js file. I need to do that by a javascript.
How to do that?
app.js file
app.controller('MyLocCtrl',function($firebaseObject){
myfunction = function () {
const rootRef = firebase.database().ref();
this.object = $firebaseObject(rootRef);
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
};
}
);
and my JS code in another page//map.html
<script src="app.js"></script>
<body ng-app="app">
<div id="map" ng-app='app' ng-controller="MyLocCtrl"></div>
</body>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUX6F83LCTZ7_uQlXzR6_Q2u6BXFIvGkY&callback=angular.element(document.getElementById('map')).firebaseObject().myfunction();">
</script>
</html>
You should have the app declared as an angular module like this:
var app = angular.module('myApp',[]);
app.controller('MyLocCtrl', ['$scope', function($scope) {
//
}]);
After that you are able to communicate with the html
Also, you already declared ng-app='app' in the body, you should remove it from the div element
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); %>;