Pfthb

I have this code:

<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 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', 
 '#'
 ],
 [
 'Atrakcja 2 PL', 
 53.41475000, 
 14.60220358, 
 'Atrakcja 2 PL', 
 '#'
 ],
 ];
 var infoWindow= new google.maps.InfoWindow(maxWidth:600),
 marker, i,
 image = 'http://localhost/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: image,
 title: beach[0],
 myurl: beach[4]
 );

 google.maps.event.addListener(marker, 'click', (function(marker, i) 
 return function() 
 infoWindow.setContent('<a href="'+marker['myurl']+'">'+marker['title']+'</a>');
 infoWindow.open(map, marker);
 
 )(marker, i));
 map.fitBounds(bounds);
 map.mapTypes.set('Styled', styledMapType);

 
 
</script>

I have 2 links:

- Atrakcja 1 pl
- Atrakcja 2 pl.

I would like to click on the links above to select the appropriate marker on Google Maps.

So if the user clicks on the link "Atrakcja 1 pl" - then the google map will show the marker Atrakcja 1 pll. I would like this marker on the map to be centered and his hint would be visible.

How can I do this in my code?

Please, help me.

use addmarker function like this:

var markers = [
 [
 'Atrakcja 1 pl', 
 51.73925413, 
 19.51309225, 
 'Atrakcja 1 pl', 
 '#'
 ],
 [
 'Atrakcja 2 PL', 
 53.41475000, 
 14.60220358, 
 'Atrakcja 2 PL', 
 '#'
 ],
 ];

function addmarker(point) 
 var latlng = new google.maps.LatLng(point[1], point[2]);
 var marker = new google.maps.Marker(
 position: latLang,
 title: point[0],
 draggable: true,
 map: map
 );
 map.setCenter(marker.getPosition())


$('#obj-1').on('click', function() 
 addmarker(markers[0])
)

$('#obj-2').on('click', function() 
 addmarker(markers[1])
)

This code use jquery

add this to your html head tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

after setting the marker use

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

and also you have to include the script to display map

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=function" async defer></script>