API Карт Google - все маркеры не отображаются при первой загрузке

Question

Мне нужно, чтобы все маркеры отображались на карте при первой загрузке, а первый маркер, который загружает (синий с тенью), имеет инфо-окно, которое открывается на первый клик. Любые полезные предложения? вот как это выглядит: http://jsfiddle.net/robzor2014/ye3x8/35/

$(document).ready(function() { 
initialize(); 

$("#link1").click(function() { 
    changeMarkerPos(38.571924, -122.555494); 
    makeMarker({ 
     position: new google.maps.LatLng(38.571924, -122.555494), 
     title: 'Clos Pegase', 
     content: '<div style="height:150px; width:350px;"><img style="float:right;"src="http://www.clospegase.com/static/images/closPegaseMap.jpg"><h2>Clos Pegase</h2>Lorem ipsum dolor sit amet</div>', 
     icon: 'http://www.clospegase.com/static/images/pegase.png' 
    }); 
    makeMarker.open(map, marker); 
}); 

$("#link2").click(function() { 
    changeMarkerPos(38.40411, -122.36469); 
    makeMarker({ 
     position: new google.maps.LatLng(38.40411, -122.36469), 
     title: 'Girard', 
     icon: 'http://www.clospegase.com/static/images/girard.png', 
     content: '<div style="height:150px; width:350px;"><img style="float:right;"src="http://www.clospegase.com/static/images/closPegaseMap.jpg"><h2>Girard</h2>Lorem ipsum dolor sit amet<div>' 
    }); 
    makeMarker.setMap(map); 
}); 

$("#link3").click(function() { 
    changeMarkerPos(38.29186, -122.45804); 
    makeMarker({ 
     position: new google.maps.LatLng(38.29186, -122.45804), 
     title: 'Kunde', 
     icon: 'http://www.clospegase.com/static/images/kunde.png', 
     content: '<div style="height:150px; width:350px;"><img style="float:right;"src="http://www.clospegase.com/static/images/closPegaseMap.jpg"><h2>Kunde</h2>Lorem ipsum dolor sit amet<div>' 
    }); 
}); 

$("#link4").click(function() { 
    changeMarkerPos(38.41461, -122.54650); 
    makeMarker({ 
     position: new google.maps.LatLng(38.41461, -122.54650), 
     title: 'Viansa', 
     icon: 'http://www.clospegase.com/static/images/viansa.png', 
     content: '<div style="height:150px; width:350px;"><img style="float:right;"src="http://www.clospegase.com/static/images/closPegaseMap.jpg"><h2>Viansa</h2>Lorem ipsum dolor sit amet<div>' 
    }); 
}); 

function initialize() { 

    var styles = [{ 
     stylers: [{ 
      saturation: -100 
     }] 
    }]; 

    var styledMap = new google.maps.StyledMapType(styles, { 
     name: "Styled Map" 
    }); 

    var mapProp = { 
     center: new google.maps.LatLng(38.571924, -122.555494), 
     zoom: 10, 
     panControl: true, 
     zoomControl: true, 
     mapTypeControl: true, 
     scaleControl: true, 
     streetViewControl: true, 
     overviewMapControl: false, 
     rotateControl: true, 
     scrollwheel: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), mapProp); 

    map.mapTypes.set('map_style', styledMap); 
    map.setMapTypeId('map_style') 

    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(38.571924, -122.555494), 
     animation: google.maps.Animation.DROP, 
     title: 'Clos Pegase', 

     icon: 'http://www.clospegase.com/static/images/main.png' 
    }); 

    marker.setMap(map); 
    map.panTo(marker.position); 


    $() 
} 

function changeMarkerPos(lat, lon) { 
    myLatLng = new google.maps.LatLng(lat, lon) 
    marker.setPosition(myLatLng); 
    map.panTo(myLatLng); 
} 

function makeInfoWindowEvent(map, infowindow, marker) { 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map, marker); 

    }); 
} 


var infoWindow = new google.maps.InfoWindow(); 
var markerBounds = new google.maps.LatLngBounds(); 
var markerArray = []; 

function makeMarker(options) { 
    var pushPin = new google.maps.Marker({ 
     map: map 
    }); 
    pushPin.setOptions(options); 
    google.maps.event.addListener(pushPin, 'click', function() { 
     infoWindow.setOptions(options); 
     infoWindow.open(map, pushPin); 
    }); 
    markerArray.push(pushPin); 
    return pushPin; 
} 
google.maps.event.addListener(map, 'click', function() { 
    infoWindow.close(); 
}); 

function openMarker(i) { 
    google.maps.event.trigger(markerArray[i], 'click'); 
}; 

}); 

Answer 1

Вы только добавив один маркер на карте изначально:

marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(38.571924, -122.555494), 
    animation: google.maps.Animation.DROP, 
    title: 'Clos Pegase', 

    icon: 'http://www.clospegase.com/static/images/main.png' 
}); 

marker.setMap(map); 
map.panTo(marker.position); 

Другие маркеры только добавляются при нажатии на ссылку (которая также добавляет InfoWindow функциональность, которую вы ищете):

$("#link2").click(function() { 
    changeMarkerPos(38.40411, -122.36469); 
    makeMarker({ 
     position: new google.maps.LatLng(38.40411, -122.36469), 
     title: 'Girard', 
     icon: 'http://www.clospegase.com/static/images/girard.png', 
     content: '<div style="height:150px; width:350px;"><img style="float:right;"src="http://www.clospegase.com/static/images/closPegaseMap.jpg"><h2>Girard</h2>Lorem ipsum dolor sit amet<div>' 
    }); 
    makeMarker.setMap(map); 
});