Google지도 마커 위치지도를 변경하려면 링크/탭을 클릭하십시오

Question

탭 2 및 마커/위치이 (가) 변경 될 수 있습니까? 위로 가기 탭 1마커/위치 첫 번째 위치로 다시 변경하십시오. http://jsfiddle.net/ye3x8/

function initialize() { 

    var styles = [{ 
     stylers: [{ 
      saturation: -100 
     }] 
    }]; 

    var styledMap = new google.maps.StyledMapType(styles, { 
     name: "Styled Map" 
    }); 

    var mapProp = { 
     center: new google.maps.LatLng(3.165659, 101.611416), 
     zoom: 17, 
     panControl: false, 
     zoomControl: false, 
     mapTypeControl: false, 
     scaleControl: true, 
     streetViewControl: false, 
     overviewMapControl: false, 
     rotateControl: true, 
     scrollwheel: false, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp); 

    map.mapTypes.set('map_style', styledMap); 
    map.setMapTypeId('map_style') 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(3.167244, 101.612950), 
     animation: google.maps.Animation.DROP, 
     icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Marker-Outside-Pink.png', 
    }); 

    marker.setMap(map); 

    google.maps.event.addListener(marker, "click", function() { 

    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

마커는과 같이지도에 추가 할 수 있습니다

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

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title: 'Hello World!' 
}); 

마커의 위치를 ​​다음과 같이 변경할 수 있습니다

marker.setPosition(new google.maps.LatLng(lat, lon)); 

의 위치를 ​​변경하려면 당신의 탭을 기반으로 사용자가 선택한 탭을 기반으로 할 수 있습니다.

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

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title: 'Hello World!' 
}); 

//When user clicks tab1: 
changeMarkerPos(marker, tab1lat, tab1lon); 

//When user clicks tab1: 
changeMarkerPos(marker, tab2lat, tab2lon); 

function changeMarkerPos(marker, lat, lon){ 
    marker.setPosition(new google.maps.LatLng(lat, lon)); 
} 

Answer 2

2 개 마커를 작성하고 추천 기능을 추가

[바이올린 링크] :

<script> 
function recenter() { 
    map.setCenter(new google.maps.LatLng(<?php echo $coord[0].",".$coord[1];?>)); 
    map.setZoom(16); 
    } 

function recenter2() { 
    map.setCenter(new google.maps.LatLng(<?php echo $coord2[0].",".$coord2[1];?>)); 
    map.setZoom(16); 
    } 
</script> 

$의 COORD [0] $ [1] 최초의 위도와 경도입니다 COORD 마커 $ coord2 [0] 및 $ coord2 [1]은 두 번째 마커의 위도와 경도입니다.

탭에 onclick 기능을 추가하는 것을 잊지 마십시오 :

onclick="recenter();" 

onclick="recenter2();"