Javascript - Passing array in as a parameter

Question

I want to put this google maps script into a js file and pass the mapLocs array into it as a parameter from a script in the html page. Does anyone know how this could possibly be done please?

function initialize(){
    var map = new google.maps.Map(document.getElementById("map"),
    {
        zoom: 13,
        center: new google.maps.LatLng(53.408103, -2.979595),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    setMarkers(map, mapLocs);
}

// To be passed in as a parameter?
var mapLocs = [
    ['Liverpool', 53.408103, -2.979595]
];

function setMarkers(map, locations){
    for (var i = 0; i < locations.length; i++){
        var places = locations[i];
        var myLatLng = new google.maps.LatLng(places[1], places[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            draggable: false,
            map: map,
            title: places[0],
            zIndex: places[3]
        });
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

I'm not sure what the problem is. Can't you move mapLocs into initialize, or before initialize is defined? Or just make sure that the map script is below the script that defines mapLocs in the HTML page if it's in a different script. — Andy
– Andy, Commented May 28, 2015 at 10:41
Hmm I think the problem is that Im getting mapLocs is not defined as the js file is being loaded in the footer — Adam
– Adam, Commented May 28, 2015 at 10:49
The code as posted works for me. What are you trying to accomplish? — geocodezip
– geocodezip, Commented May 29, 2015 at 2:54

Vadim Gremyachev · Accepted Answer · 2015-05-28 14:58:30Z

You could initialize the map once the data is loaded:

google.maps.event.addDomListener(window, 'load', function(){
   var locations = getLocations(); 
   initializeMap(locations);
});

Modified example

function initialize(locations) {
    var map = new google.maps.Map(document.getElementById("map"),
    {
        zoom: 13,
        center: new google.maps.LatLng(53.408103, -2.979595),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    setMarkers(map, locations);
}

function setMarkers(map, locations) {
    for (var i = 0; i < locations.length; i++) {
        var places = locations[i];
        var myLatLng = new google.maps.LatLng(places[1], places[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            draggable: false,
            map: map,
            title: places[0],
            zIndex: places[3]
        });
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Map</title>
    <style>
        html, body, #map {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script src="map.js"></script>
</head>
<body>
    <div id="map"></div>
    <script>
        google.maps.event.addDomListener(window, 'load', function () {
            //1.load data
            var mapLocs = [
               ['Liverpool', 53.408103, -2.979595]
            ];
            //2.init map
            initialize(mapLocs);
        });
    </script>
</body>
</html>

Collectives™ on Stack Overflow

Javascript - Passing array in as a parameter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related