I have Google maps on site (www.maclife.pl/pl/kontakt) with 4 markers. I don't know how I can move map between markers when I change select options (like First marker...)
var map;
function initialize(){
var mapOptions = {
scrollwheel: false,
zoom: 15,
center: new google.maps.LatLng(52.2081935, 21.0220677)
};
map = new google.maps.Map(document.getElementById('google-maps'), mapOptions);
var markers = [
['MacLife - Warszawa, Puławska', 52.2082716, 21.0218746, ''],
['MacLife - Warszawa, Łukowska', 52.2360077, 21.1121838, ''],
['MacLife - Warszawa, Jana Pawła II', 52.250402, 20.986717, ''],
['MacLife - Radom, B. Chrobrego', 51.4063449, 21.155306, '']
];
for (var i = 0; i < markers.length; i++){
marker=addMarker(i);
}
google.maps.event.trigger(addMarker(2) ,'click');
function addMarker(i){
var draftMarker = markers[i];
var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: draftMarker[0]
});
google.maps.event.addListener(marker, 'click', function(){
info.setContent(draftMarker[3]);
info.open(map,marker);
});
return marker;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
create an array to hold references to the google.maps.Marker objects in the global scope:
var gmarkers = [];
push your markers onto that array when you create them:
function addMarker(i) {
var draftMarker = markers[i];
var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: draftMarker[0]
});
google.maps.event.addListener(marker, 'click', function () {
info.setContent(draftMarker[3]);
info.open(map, marker);
});
gmarkers.push(marker);
return marker;
}
If you want a sidebar or a dropdown, create it dynamically when you create the marker:
function addMarker(i) {
var draftMarker = markers[i];
var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: draftMarker[0]
});
google.maps.event.addListener(marker, 'click', function () {
info.setContent(draftMarker[3]);
info.open(map, marker);
});
gmarkers.push(marker);
side_bar_html += '<option value=' + (gmarkers.length-1) + '>' + draftMarker[0] + '<\/option>';
return marker;
}
code snippet:
var map;
var info = new google.maps.InfoWindow();
var gmarkers = [];
var side_bar_html = "";
function initialize() {
var mapOptions = {
scrollwheel: false,
zoom: 15,
center: new google.maps.LatLng(52.2081935, 21.0220677)
};
map = new google.maps.Map(document.getElementById('google-maps'), mapOptions);
var markers = [
['MacLife - Warszawa, Puławska', 52.2082716, 21.0218746, '0'],
['MacLife - Warszawa, Łukowska', 52.2360077, 21.1121838, '1'],
['MacLife - Warszawa, Jana Pawła II', 52.250402, 20.986717, '2'],
['MacLife - Radom, B. Chrobrego', 51.4063449, 21.155306, '3']
];
for (var i = 0; i < markers.length; i++) {
marker = addMarker(i);
}
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = "<select onchange='myclick(this.value);'>" + side_bar_html + "</select>";
google.maps.event.trigger(gmarkers[2], 'click');
map.setCenter(gmarkers[2].getPosition());
function addMarker(i) {
var draftMarker = markers[i];
var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: draftMarker[0]
});
google.maps.event.addListener(marker, 'click', function() {
info.setContent(draftMarker[3]);
info.open(map, marker);
});
gmarkers.push(marker);
side_bar_html += '<option value=' + (gmarkers.length - 1) + '>' + draftMarker[0] + '<\/option>';
return marker;
}
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
map.setCenter(gmarkers[i].getPosition());
google.maps.event.trigger(gmarkers[i], "click");
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#google-maps {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="google-maps" style="border: 2px solid #3872ac;"></div>
<div id="side_bar"></div>