2014-06-09 3 views
-2

내가 여러 장소를 선택하면 내가, 내가 이전 마커를 제거 할 을 마커가지도에 추가 할 수있는 선택 옵션을 변경하면이 지오 코더 구글 맵 코드 MY 코드가 작동합니다.어떻게 구글 맵에서 이전 마커를 제거

<!DOCTYPE html> 
<html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"><title>Geocoding service</title> 
<style> 
    html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
} 
#panel { 
    position: absolute; 
    top: 5px; 
    left: 50%; 
    margin-left: -180px; 
    z-index: 5; 
    background-color: #fff; 
    padding: 5px; 
    border: 1px solid #999; 
}</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
var geocoder;var map; 
    function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(9.9252007,78.1197754); 
    var mapOptions = { 
    zoom: 8,center: latlng 
     } map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     } 
    function codeAddress() { 
    var address = document.getElementById('address').value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
    map.setCenter(results[0].geometry.location); 
    var marker = new google.maps.Marker({ 
    map: map, position: results[0].geometry.location 
     }); 
    } else { 
    alert('Geocode was not successful for the following reason: ' + status); 
     }}); } 
     google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
     </head><body> 
     <div align="center" verticle-align="ce"> 
     <form method="get" action=""> 
     <select name="address" id="address" onChange="codeAddress()" > 
     <option value="chennai,india">chennai,india</option> 
     <option value="madurai,india">madurai,india</option> 
     <option value="bangalore,india">bangalore,india</option> 
     <option value="delhi,india">Delhi</option> 
     </select> 
     </form> </div> 
    <div id="map-canvas" style="width:750px;height:500px;"></div> 
    </body></html> 

코드의 작업 : 내가 페이지를로드 할 때 , 그것은 자동로드 초기 장소, 나는 그것이 하나를 선택로드 옵션 값을 변경합니다.

답변

0

는 전역 변수로 marker을 확인 marker.setPosition()을 사용 initialize() 기능 및 선택 설정 위치의 변화에 ​​마커 정의를 이동 :

var geocoder; 
var map; 
var marker; 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(9.9252007,78.1197754); 
    var mapOptions = { 
     zoom: 8, 
     center: latlng 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    marker = new google.maps.Marker({ 
     map: map 
    }); 
} 

function codeAddress() { 
    var address = document.getElementById('address').value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var position = results[0].geometry.location; 
      map.setCenter(position); 

      marker.setPosition(position); 
     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
} 

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

example at jsbin를 참조하십시오.

관련 문제