Google Maps Multiple Markers

HTML

<div>
    <div id="map" style="width: 500px; height: 400px;"></div>
    <a href="#" id="addpins">add these pins</a>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</div>
<script>
    function initialize() {
        var locations = [
            ['Passage Island', 49.343085, -123.305938],
            ['Point Atkinson', 49.329925, -123.264994]
        ];
        console.log('in')
        var mapOptions = {
            center: new google.maps.LatLng(49.343085, -123.305938),
            zoom: 13,
            mapTypeControl: false,
            panControl: false,
            streetViewControl: false,
            zoomControl: false,
            disableDoubleClickZoom: true,
        };
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
        var marker, i;

        for (i = 0; i < locations.length; i++) {
            var p = new google.maps.LatLng(locations[i][1], locations[i][2]);
            marker = new google.maps.Marker({
                position: p,
                map: map
            });
        }
    }
    
    document.getElementById('addpins').addEventListener('click', function(e){
    	google.maps.event.addDomListener(window, 'load', initialize);
    });
    
</script>