Menu
I have the following piece of code which displays a map when the user clicks on the submit button.
At the moment the function initialize() takes no parameters and the map centers on a fixed latitude and longitude. I would like to be able to have latitude and longitude as parameters so that the map centers on those.
I have the latitude and the longitude already so getting these parameters isn't the problem; my problem is that I don't know how to pass them to the function.
Full code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<div id="map">
<button type="button" onclick="loadScript()">submit</button>
</div>
<script>
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
}
function loadScript() {
var myKey = "myAPIKey";
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://maps.googleapis.com/maps/api/js?key=" + myKey + "&sensor=false&callback=initialize";
document.body.appendChild(script);
}
</script>
</body>
JavaScript alone:
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
}
function loadScript() {
var myKey = "myAPIKey";
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://maps.googleapis.com/maps/api/js?key=" + myKey + "&sensor=false&callback=initialize";
document.body.appendChild(script);
}
514
In JavaScript, when we pass a function to another function as a parameter, it is called a callback function. The function takes another function as a parameter and calls it inside. A callback function makes sure that a function will not run until the task completes.
Passing a function to another function or passing a function inside another function is known as a Callback Function. Syntax: function geekOne(z) { alert(z); } function geekTwo(a, callback) { callback(a); } prevfn(2, newfn);
Arguments are Passed by Value The parameters, in a function call, are the function's arguments. JavaScript arguments are passed by value: The function only gets to know the values, not the argument's locations. If a function changes an argument's value, it does not change the parameter's original value.
Just initiate variables before the script. In "loadScript" function update the variables and use them in the "initialize" function. For me, it works.
<script>
var string = ""; // initialize variables here. You need var lat and var lng
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
console.log(string); // just checking, if it does work in "initialize" function
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
}
function loadScript() {
var myKey = "myAPIKey";
var script = document.createElement('script');
script.type = 'text/javascript';
string = "hey it works"; //////////// here take the coordinates
script.src = "https://maps.googleapis.com/maps/api/js?&sensor=false&callback=initialize";
document.body.appendChild(script);
}
</script>
Also, I think it is possible to change the position later, with the command:
map.setCenter(new google.maps.LatLng( 45, 19 ) );
I hope it helps
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
