Hide markers from google maps when click an external link and only show its corresponding marker

Question

How do i change my center for google maps with a link and remove other markers? i have this code

https://jsfiddle.net/m9ugbc7h/

So, i need to create a link for example

<a href="#" onclick="variable='latitude = 21.0241839,longitude = -86.8148164,map_zoom = 6;';return false">Ventura</a>

In this case the function must change google maps center to focus the "ventura" marker and hide the other markes and when the user clicks on

<a href="#" onclick="variable='latitude = 21.0241839,longitude = -86.8148164,map_zoom = 17;';return false">Dolphinaris</a>

the zoom will change and will hide every other marker and show only the ones of Dolphinaris

Thanks in advance

Answer 1

Make map visible outside of jQuery(document).ready .

Create var markers = []; array.

When crating markers, add custom property name to it, and push marker into markers array:

var marker = new google.maps.Marker({
        position: new google.maps.LatLng(21.0241839, -86.8148164),
        map: map,
        visible: true,
        icon: ventura,
        name: 'ventura',
    });
    markers.push(marker);

On click, invoke resetMap() function:

<a href="#" onclick="resetMap('21.0241839', '-86.8148164', 25, 'ventura');return false;">Ventura</a>

Inside resetMap function, set center and zoom to map , iterate markers , matching them by custom property name - matched one set visible, others set to invisible.

function resetMap(lat, lon, zoom, name) {

    var newPos = new google.maps.LatLng(lat, lon);

    map.setCenter(newPos);
     map.setZoom(zoom);

   markers.forEach(function(marker) {        
       if(marker.get('name') == name)
       {
           console.log('match');
           marker.setVisible(true);
       }
       else
       {
          marker.setVisible(false);
       }    
});

Working fiddle: https://jsfiddle.net/m9ugbc7h/1/

EDIT:

Question: "is there any way to change smoothly the zoom and coordinates?"

Yes, use method:

panTo(latLng:LatLng|LatLngLiteral)

Changes the center of the map to the given LatLng. If the change is less than both the width and height of the map, the transition will be smoothly animated.

https://developers.google.com/maps/documentation/javascript/reference?csw=1

EDIT 2:

Implementing panTo is easy:

map.panTo(newPos);

instead of:

map.centerTo(newPos);

but as I have faced a bit 'flickering' effect due to hide/show markers that are close on the map, I have added some delay in functions invocation + markers show/hide:

function resetMap(lat, lon, zoom, name) {   
    var newPos = new google.maps.LatLng(lat, lon);
    $.when( map.setZoom(zoom) ).done(function(){
      $.when( map.panTo(newPos)).done(function(){
        setMarkerVisibility(name);
      });
    });  
}

And showing matched marker is now executed with 300 ms delay:

function setMarkerVisibility(name){
    markers.forEach(function(marker) {     
   console.log(marker.get('name'));
    if(marker.get('name') == name)
       {           
          setTimeout(function(){ marker.setVisible(true); }, 300); 
       }
       else
       {
          marker.setVisible(false);
       }
   });
}

It looks a bit smoother like this.

Working fiddle: https://jsfiddle.net/m9ugbc7h/3/