다른 Google지도를로드 할 때마다 다른 주소를 클릭하십시오.

Question

내 웹 사이트에는 두 개의 패널이 있으며 왼쪽은 광고용이고 오른쪽은 Google지도 용입니다. 페이지 새로 고침없이 특정 주소를 클릭하면 Google지도를로드하려고합니다. 도와주세요. 당신은 자바 스크립트를 통해이를 구현한다

Answer 1

이 알고리즘은 다음과 같이 될 것입니다 :

1. 는 기본 위치를 기반으로지도보기 (을 예를 들어이 당신의 도시와 적절한 줌 레벨)
2. 형태와 텍스트 상자는 검색하고 "검색 버튼"지오 코딩하고 해당 주소를 위도, 경도를 얻을 수에 클릭에
3. 이벤트를 해결하기 위해
4. 자바 스크립트를 통해 지오 서비스 응답
에 따라지도의 중심을 다시 설정
5. 지오 코딩 서비스에서 반환 된 위치에 마커를 추가합니다.

희망이

PD가 어떻게 지금 패널과지도를 쿼리하는 데 도움이? 여기

Answer 2

지오 주소가 https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests

다음지도는 글로벌지도 객체 하고 latLng를가에서 얻은 좌표입니다이 map.setMap (latLng를) 을 그것에 대해 이동하는 방법에 대한 링크입니다 지오 코드 라이브러리

Answer 3

<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(-34.397, 150.644); 

    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> 

<input id="address" type="textbox" value="New Delhi, India"> 

     <input type="button" value="Geocode" onclick="codeAddress()">