클릭시 펼친 팬 및 센터 Google지도 아이콘

Question

Google지도 API를 사용하여 여러 위치를 잘 표시합니다. 해당 링크를 클릭하면 위치를 중앙에 배치하기 위해 원하는 링크를 추가했습니다.

나는 위치를 중앙에 onclick을 추가했지만

<a id="1" href="#">Go to 1</a><br> 
<a id="2" href="#">Go to 2</a><br> 
<a id="3" href="#">Go to 3</a><br> 
<a id="4" href="#">Go to 4</a><br> 
<a id="5" href="#">Go to 5</a><br> 

var labels = '123456'; 
var labelIndex = 0; 

var locations = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.923036, 151.259052, 5], 
    ['Cronulla Beach', -34.028249, 151.157507, 3], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 1] 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: new google.maps.LatLng(-33.92, 151.25), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var infowindow = new google.maps.InfoWindow(); 

var marker, i; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    label: labels[labelIndex++ % labels.length], 

    }); 
}; 

$("a").click(function(){ 
//zoom in on location 

    var id = ($(this).data('id')); 
    google.maps.event.trigger(id , "resize"); 
    map.panTo(marker.getPosition()); 
    map.setZoom(14); 
    return false; 
}); 

Project on Jsfiddle

Answer 1

내가 JSFiddle에 코드를 업데이트가 작동하지 않는 그 : http://jsfiddle.net/3gz43tqq/3/

$("a").click(function(){ 
    var id = this.id; 
    map.setCenter(new google.maps.LatLng(locations[id][1], locations[id][2])) 
    return false; 
}); 

당신이 ID를 얻을 수 있습니다 a 사용 기능 setCenter (LatLng 개체)

Answer 2

업데이트 바이올린 : http://jsfiddle.net/3gz43tqq/5/

작업 코드 :

var labels = '123456'; 
 
var labelIndex = 0; 
 

 
var locations = [ 
 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
 
    ['Coogee Beach', -33.923036, 151.259052, 5], 
 
    ['Cronulla Beach', -34.028249, 151.157507, 3], 
 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
 
    ['Maroubra Beach', -33.950198, 151.259302, 1] 
 
]; 
 

 
var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(-33.92, 151.25), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
}); 
 

 
var infowindow = new google.maps.InfoWindow(); 
 

 
var marker, i; 
 
var markers = []; 
 
for (i = 0; i < locations.length; i++) { 
 
    var marker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
    map: map, 
 
    label: labels[labelIndex++ % labels.length], 
 
    }); 
 
    markers.push(marker); 
 
}; 
 

 
$("a").click(function() { 
 
    // labels start at 1, array starts at 0 
 
    map.panTo(markers[this.id-1].getPosition()); 
 
    map.setZoom(14); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.google.com/maps/api/js"></script> 
 
<div id="map" style="width: 500px; height: 400px;"></div> 
 
<div> 
 
    <a id="1" href="#">Go to 1</a> 
 
    <br> 
 
    <a id="2" href="#">Go to 2</a> 
 
    <br> 
 
    <a id="3" href="#">Go to 3</a> 
 
    <br> 
 
    <a id="4" href="#">Go to 4</a> 
 
    <br> 
 
    <a id="5" href="#">Go to 5</a> 
 
    <br> 
 
</div>