Here is some javascript code ===>
(function() {
var infowindow;
window.onload = function() {
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var i = 0;
var marker;
var btn = document.getElementById('btn');
var map = new google.maps.Map(document.getElementById('map'), options);
var bounds = new google.maps.LatLngBounds();
var places = [];
btn.onclick = getLatLng;
function getLatLng(){
var Latt = parseFloat(document.getElementById("lat").value);
var Long = parseFloat(document.getElementById("lng").value);
pushPlace(Latt, Long);
}
function pushPlace(lattitude , longitude){
this.lattitude = lattitude;
this.longitude = longitude;
places.push(new google.maps.LatLng(lattitude. longitude));
var infowindow;
marker = new google.maps.Marker({
position: places[i],
map: map,
title: 'Place number ' + i
});
(function(i, marker){
google.maps.event.addListener(marker, 'click', function(){
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
infowindow.setContent('Place number '+i);
infowwindow.open(map, marker);
});
})(i, marker);
bounds.extend(places[i]);
map.fitBounds(bounds);
i++;
}
};
})();
I am creating a function that will take user input as longitude and lattitude and display a marker on that places. And automatically set bounds to the map. here is my html mark up ==>
<!doctype html>
<html lan="en">
<head>
<meta charset="utf-8">
<title>Google Maps API v3</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="googlemaps.js"></script>
</head>
<body>
<div id="map"></div>
<div id="latlong">
<input type="number" id="lat" placeholder="Lattitude"></input>
<input type="number" id="lng" placeholder="Longitude"></input>
<button id="btn">PUSH</button>
</div>
</body>
</html>
and css ==>
#map{
width: 600px;
height: 300px;
margin: auto;
background: #fff;
}
#latlong{
width: 500px;
margin: auto;
padding: 20px;
}
body{
background: #000;
}
but when I run it on browser, it says "Uncaught RangeError: Maximum call stack size exceeded". How do I get rid of it?