Showing a point on GoogleMaps after clicking a button - google-maps

Question

I have Google Maps with many markers.
This is my code:
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<div class="apartament_atrakcje">Atrakcja 1 pl</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<div class="apartament_atrakcje">Atrakcja 2 PL</div>
</div>
<div id="map_canvas"></div>
<script>
window.onload = function () {
var styles = [{"featureType":"all"}];
var bounds = new google.maps.LatLngBounds();
var options = {
mapTypeControlOptions: {
mapTypeIds: ['Styled']
},
center: new google.maps.LatLng(11, 22),
zoom: 15,
disableDefaultUI: true,
mapTypeId: 'Styled'
};
marker = new google.maps.Marker({
map:map,
});
var div = document.getElementById('map_canvas');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
var markers = [
['Atrakcja 1 pl', 51.73925413, 19.51309225, 'Atrakcja 1 pl', '#', 'poi.png'],
['Atrakcja 2 PL', 53.41475000, 14.60220358, 'Atrakcja 2 PL', '#', 'poi.png'],
['Biskupia', 51.93780943, 15.52505514, 'Biskupia', '#', 'poi2.png']
];
var infoWindow= new google.maps.InfoWindow({maxWidth:600}),
marker, i,
image = 'http://localhost/apartamenty/assets/poi.png';
for( i = 0; i < markers.length; i++ ) {
var beach = markers[i];
var position = new google.maps.LatLng(beach[1], beach[2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
icon: 'http://localhost/apartamenty/assets/' + beach[5],
title: beach[0],
myurl: beach[4]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(''+marker['title']+'');
infoWindow.open(map, marker);
}
})(marker, i));
map.fitBounds(bounds);
map.mapTypes.set('Styled', styledMapType);
}
}
</script>
I have a map and the markers on it. This is ok!
After clicking on link obj-1 or obj-2 I would like to:
- center the map on this one, selected marker
- display the marker of this marker
If the user clicks on the link "Atrakcja 1 pl" - then map is center on marker with title Atrakcja 1 pll and his hint would be visible.
Does anyone know how to do it in my code?

Answer 1

One option would be to keep references to the markers in an array and add DOM click listeners to your "links" to open the marker's InfoWindow and center the map on that marker.
create an array of markers:
var gmarkers=[];
for (i = 0; i < markers.length; i++) {
var beach = markers[i];
var position = new google.maps.LatLng(beach[1], beach[2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
// icon: 'http://localhost/apartamenty/assets/' + beach[5],
title: beach[0],
myurl: beach[4]
});
gmarkers.push(marker);
// ...
add click listeners to your "links" that opens that marker's InfoWindow and centers the map on its position:
if (document.getElementById('obj-'+(i+1))) {
// relies on the naming convention in your posted code
google.maps.event.addDomListener(document.getElementById('obj-'+(i+1)), 'click', function(i) {
return function() {
google.maps.event.trigger(gmarkers[i], 'click');
map.setCenter(gmarkers[i].getPosition());
}}(i))
}
proof of concept fiddle
code snippet:
html,
body,
#map_canvas {
height: 90%;
width: 100%;
padding: 0px;
margin: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<a href="#" class="obj-1" id="obj-1">
<div class="apartament_atrakcje">Atrakcja 1 pl</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<a href="#" class="obj-2" id="obj-2">
<div class="apartament_atrakcje">Atrakcja 2 PL</div>
</a>
</div>
<div id="map_canvas"></div>
<script>
window.onload = function() {
var styles = [{
"featureType": "all"
}];
var gmarkers = [];
var bounds = new google.maps.LatLngBounds();
var options = {
mapTypeControlOptions: {
mapTypeIds: ['Styled']
},
center: new google.maps.LatLng(11, 22),
zoom: 15,
disableDefaultUI: true,
mapTypeId: 'Styled'
};
marker = new google.maps.Marker({
map: map,
});
var div = document.getElementById('map_canvas');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, {
name: 'Styled'
});
var markers = [
['Atrakcja 1 pl', 51.73925413, 19.51309225, 'Atrakcja 1 pl', '#', 'poi.png'],
['Atrakcja 2 PL', 53.41475000, 14.60220358, 'Atrakcja 2 PL', '#', 'poi.png'],
['Biskupia', 51.93780943, 15.52505514, 'Biskupia', '#', 'poi2.png']
];
var infoWindow = new google.maps.InfoWindow({
maxWidth: 600
}),
marker, i,
image = 'http://localhost/apartamenty/assets/poi.png';
for (i = 0; i < markers.length; i++) {
var beach = markers[i];
var position = new google.maps.LatLng(beach[1], beach[2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
// icon: 'http://localhost/apartamenty/assets/' + beach[5],
title: beach[0],
myurl: beach[4]
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent('' + marker['title'] + '');
infoWindow.open(map, marker);
}
})(marker, i));
map.fitBounds(bounds);
map.mapTypes.set('Styled', styledMapType);
if (document.getElementById('obj-' + (i + 1))) {
// relies on the naming convention in your posted code
google.maps.event.addDomListener(document.getElementById('obj-' + (i + 1)), 'click', function(i) {
return function() {
google.maps.event.trigger(gmarkers[i], 'click');
map.setCenter(gmarkers[i].getPosition());
}
}(i))
}
}
}
</script>