Center map on window with random number - google-maps-api-3

Question

I am new to this forum (this is my first post) and a beginner in using google map with javascript. I hope I apologize if the question is silly.
I have an arrangement with several cities and want to focus the map according to the result of a random number. I'm using the attached code, but does not work me. Can anyone see what I am doing wrong? Thank you.
<script>
var myrand=0
function initialize() {
var i;
var Locations = [
{
lat: 40.7127837,
lon: -74.00594130000002,
title: "New york",
description: "I'm number 1"
},
{
lat: 23.634501,
lon: -102.55278399999997,
title: "Mexico",
description: "I'm number 2"
},
{
lat: 36.778261,
lon: -119.41793239999998,
title: "California",
description: "I'm number 3"
}
];
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(30.011902,-98.48424649999998),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var infowindow = new google.maps.InfoWindow({
content: ''
});
// loop over our array
for (i = 0; i < Locations.length; i++) {
// create a marker
var marker = new google.maps.Marker({
title: Locations[i].title,
position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),
map: map
});
// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].description + "</p>");
//bindInfoWindow(marker, map, infowindow, Locations[i].description);
}
}
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
//alert("seleccionado el "+html);
});
}
function aleatorio(min,max)
{
myrand = Math.floor(Math.random()*(max-min+1)+min);
alert('salió '+ myrand);
map.setCenter({lat: Locations[myrand].lat, lng: Locations[myrand].lon});
return Math.floor(Math.random()*(max-min+1)+min);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

You have typos in your code:
the random number function in javascript is Math.random, not Math.myrandom.
the function aleatorio depends on the array Locations being in scope. Currently that array is local to the initialize function. You either need to move aleatorio inside the initialize function or move the Locations array into the global namespace.
proof of concept fiddle
code snippet:
var myrand = 0
function initialize() {
var i;
var Locations = [{
lat: 40.7127837,
lon: -74.00594130000002,
title: "New york",
description: "I'm number 1"
}, {
lat: 23.634501,
lon: -102.55278399999997,
title: "Mexico",
description: "I'm number 2"
}, {
lat: 36.778261,
lon: -119.41793239999998,
title: "California",
description: "I'm number 3"
}];
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(30.011902, -98.48424649999998),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var infowindow = new google.maps.InfoWindow({
content: ''
});
// loop over our array
for (i = 0; i < Locations.length; i++) {
// create a marker
var marker = new google.maps.Marker({
title: Locations[i].title,
position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),
map: map
});
// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].description + "</p>");
}
aleatorio(0, 2);
function aleatorio(min, max) {
myrand = Math.floor(Math.random() * (max - min + 1) + min);
map.setCenter({
lat: Locations[myrand].lat,
lng: Locations[myrand].lon
});
return Math.floor(Math.random() * (max - min + 1) + min);
}
}
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
//alert("seleccionado el "+html);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>