CODEWITHSUNDEEP
javascriptgoogle-maps
Adam
Adam

Reputation: 832

Javascript - Passing array in as a parameter

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);

Upvotes: 0

Views: 175

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59338

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>

Upvotes: 1

Related Questions