Сброс карты Google в исходное состояние

Question

Я пытаюсь выяснить, как добавить кнопку «Сброс в исходное состояние».

У меня есть карта Google с маркерами для нескольких магазинов.

Это код, я использую:

<script type="text/javascript"> 
(function($) { 

/** new_map */ 

function new_map($el) { 

// var 
var $markers = $el.find('.marker'); 


// vars 
// vars 
var args = { 
zoom: 15, 
center: new google.maps.LatLng(0, 0), 
mapTypeControl: false, 
panControl: false, 
scrollwheel: false, 
streetViewControl:false, 
zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.SMALL, 
    position: google.maps.ControlPosition.RIGHT_CENTER 
}, 
styles: [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}]}; 

// create map    
var map = new google.maps.Map($el[0], args); 


// add a markers reference 
map.markers = []; 


// add markers 
$markers.each(function(){ 

    add_marker($(this), map); 

}); 


// center map 
center_map(map); 


// return 
return map; 

} 


// create info window outside of each - then tell that singular infowindow to swap content based on click 
var infowindow = new google.maps.InfoWindow({ 
content : '' 
}); 


/** add_marker */ 

function add_marker($marker, map) { 

    // var 
    var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng')); 

    // create marker 
    var marker = new google.maps.Marker({ 
     position : latlng, 
     map   : map 
    }); 


    // add to array 
    map.markers.push(marker); 



    // if marker contains HTML, add it to an infoWindow 
    if($marker.html()) 
    { 
     // create info window 



     liTag=$(".aflista ul").find("[data-lat='" + $marker.attr('data-lat') + "']"); 
     // console.log(liTag); 
     // show info window when marker is clicked 
     $(liTag).click(function() { 
      infowindow.setContent($marker.html()); 
      infowindow.open(map, marker); 
      map.setZoom(12); 
      map.setCenter(marker.getPosition()) 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent($marker.html()); 
      infowindow.open(map, marker); 
      map.setZoom(12); 
      map.setCenter(marker.getPosition()) 
     }); 

     // close info window when map is clicked 
     google.maps.event.addListener(map, 'click', function(event) { 
      if (infowindow) { 
       infowindow.close(); } 
      }); 

    } 

} 






/** center_map */ 

function center_map(map) { 

// vars 
var bounds = new google.maps.LatLngBounds(); 

// loop through all markers and create bounds 
$.each(map.markers, function(i, marker){ 

    var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng()); 

    bounds.extend(latlng); 

}); 

// only 1 marker? 
if(map.markers.length == 1) 
{ 
    // set center of map 
    map.setCenter(bounds.getCenter()); 
    map.setZoom(16); 
} 
else 
{ 
    // fit to bounds 
    map.fitBounds(bounds); 
} 

} 



/** document ready */ 

// global var 
var map = null; 

$(document).ready(function(){ 

$('.acf-map').each(function(){ 

    // create map 
    map = new_map($(this)); 

}); 

}); 

})(jQuery); 

Теперь я хочу, чтобы добавить кнопку в любом месте за пределами или внутри карты только, чтобы иметь возможность сбросить масштаб и центр в исходное состояние ,

Любые пункты в правильном направлении были бы замечательными.

Спасибо!

Answer 1

Чтобы вернуть карту в исходное состояние, сделайте то же самое, что и при инициализации своей карты. Вам не нужно все повторять, вы можете сохранить вычисленный начальный bounds в глобальной переменной (а также map), затем вызовите map.fitBounds(bounds); при нажатии кнопки сброса.

$("#reset_state").click(function() { 
    infowindow.close(); 
    map.fitBounds(bounds); 
}) 

proof of concept fiddle

фрагмент кода:

(function($) { 
 
    /** new_map */ 
 
    function new_map($el) { 
 
     var $markers = $el.find('.marker'); 
 
     var args = { 
 
     zoom: 15, 
 
     center: new google.maps.LatLng(0, 0), 
 
     mapTypeControl: false, 
 
     panControl: false, 
 
     scrollwheel: false, 
 
     streetViewControl: false, 
 
     zoomControlOptions: { 
 
      style: google.maps.ZoomControlStyle.SMALL, 
 
      position: google.maps.ControlPosition.RIGHT_CENTER 
 
     } 
 
     }; 
 

 
     // create map    
 
     map = new google.maps.Map($el[0], args); 
 
     // add a markers reference 
 
     map.markers = []; 
 
     // add markers 
 
     $markers.each(function() { 
 
     add_marker($(this), map); 
 
     }); 
 
     // center map 
 
     center_map(map); 
 
     // return 
 
     return map; 
 
    } 
 
    // create info window outside of each - then tell that singular infowindow to swap content based on click 
 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: '' 
 
    }); 
 
    /** add_marker */ 
 
    function add_marker($marker, map) { 
 
     // var 
 
     var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng')); 
 
     // create marker 
 
     var marker = new google.maps.Marker({ 
 
     position: latlng, 
 
     map: map 
 
     }); 
 
     // add to array 
 
     map.markers.push(marker); 
 
     // if marker contains HTML, add it to an infoWindow 
 
     if ($marker.html()) { 
 
     // create info window 
 
     liTag = $(".aflista ul").find("[data-lat='" + $marker.attr('data-lat') + "']"); 
 
     // console.log(liTag); 
 
     // show info window when marker is clicked 
 
     $(liTag).click(function() { 
 
      infowindow.setContent($marker.html()); 
 
      infowindow.open(map, marker); 
 
      map.setZoom(12); 
 
      map.setCenter(marker.getPosition()) 
 
     }); 
 
     google.maps.event.addListener(marker, 'click', function() { 
 
      infowindow.setContent($marker.html()); 
 
      infowindow.open(map, marker); 
 
      map.setZoom(12); 
 
      map.setCenter(marker.getPosition()) 
 
     }); 
 
     // close info window when map is clicked 
 
     google.maps.event.addListener(map, 'click', function(event) { 
 
      if (infowindow) { 
 
      infowindow.close(); 
 
      } 
 
     }); 
 
     } 
 
    } 
 
    /** center_map */ 
 

 
    function center_map(map) { 
 
     // vars 
 
     bounds = new google.maps.LatLngBounds(); 
 
     // loop through all markers and create bounds 
 
     $.each(map.markers, function(i, marker) { 
 
     var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng()); 
 
     bounds.extend(latlng); 
 
     }); 
 
     // only 1 marker? 
 
     if (map.markers.length == 1) { 
 
     // set center of map 
 
     map.setCenter(bounds.getCenter()); 
 
     map.setZoom(16); 
 
     } else { 
 
     // fit to bounds 
 
     map.fitBounds(bounds); 
 
     } 
 
    } 
 
    /** document ready */ 
 
    // global var 
 
    var map = null; 
 
    var bounds = null; 
 
    $(document).ready(function() { 
 
    $('.acf-map').each(function() { 
 
     // create map 
 
     map = new_map($(this)); 
 
    }); 
 
    $("#reset_state").click(function() { 
 
     infowindow.close(); 
 
     map.fitBounds(bounds); 
 
    }) 
 
    }); 
 
})(jQuery);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input type="button" id="reset_state" value="reset" /> 
 
<div class="aflista"> 
 
    <ul>Markers 
 
    <li data-lat='40.7127837'>New York, NY</li> 
 
    <li data-lat='40.735657'>Newark, NJ</li> 
 
    </ul> 
 
</div> 
 
<div class="acf-map" id="map_canvas"> 
 
    <div class="marker" data-lat="40.7127837" data-lng="-74.00594130000002" data-title="New York, NY">New York, NY</div> 
 
    <div class="marker" data-lat="40.735657" data-lng="-74.1723667" data-title="Newark, NJ">Newark, NJ</div> 
 
</div>