Google maps

Markers

by arcm111

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;dummy=.js"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
          margin: 0;
          padding: 0;
          height: 100%;
      }

JavaScript

var map;
var points = [
    [
        "place 1",
    53.146770, -2.296143,
    100],
    [
        "place 2",
    53.501117, -1.524353,
    100],
    [
        "place 3",
    52.961875, -0.983276,
    100]
];
var checkpoints = [];


function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(53.220835, -1.845703),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    function setMarkers(map, locations) {
        for (var i = 0; i < locations.length; i++) {
            console.log(locations[i]);
            var place = locations[i],
                myLatLng = new google.maps.LatLng(place[1], place[2]),
                marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: place[0],
                    zIndex: place[3]
                });
            checkpoints.push({
                "point": myLatLng,
                    "marker": marker
            });
        }

    }
    setMarkers(map, points);
    console.log(checkpoints);
}
google.maps.event.addDomListener(window, 'load', initialize);