지오 코딩이 포함 된 간단한 Google지도

script.php?q=canada에 응답하고지도를 보여주는 간단한 GoogleMap을 작성했습니다.지오 코딩이 포함 된 간단한 Google지도

하나의 문제는 항상 두 번째의 중심 var latlng = new google.maps.LatLng(34.052234,-118.243685);와지도를로드 한 다음 오른쪽지도를로드합니다. 내 코드를 잘못 무엇

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title><?=$_GET['q']?></title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> 
      <script type="text/javascript"> 
       var geocoder; 
       var map; 
       function initialize() { 
       geocoder = new google.maps.Geocoder(); 
       var latlng = new google.maps.LatLng(34.052234,-118.243685); 
       var address = '<?=$_GET['q']?>'; 

       var myOptions = { 
        zoom: 10, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       } 
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
       geocoder.geocode({ 'address': address}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
        map.setCenter(results[0].geometry.location); 
        // autozoom 
        map.fitBounds(results[0].geometry.viewport); 
        var marker = new google.maps.Marker({ 
         map: map, 
         position: results[0].geometry.location, 
         title: 'by Quick Maps', 
         clickable: false 
        }); 
        } else { 
        alert("Geocode was not successful for the following reason: " + status); 
        } 
       }); 
       } 
      </script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas"></div> 
</body> 
</html>

Sidequestion : 방법지도에 간단한 메시지와 함께 alert("Geocode was not successful for the following reason: " + status);를 대체?

출처

2011-12-07 Lukas

빠른 답은지도 인스턴스화를 지오 코드 콜백으로 이동하는 것입니다.

geocoder.geocode({ 'address': address}, function(results, status) { 
    var myOptions = { 
        zoom: 10, 
        center: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       } 
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     ... 
    });

이렇게하면지도가 34.052234, -118.243685 주위에 표시되지 않습니다.

결과가 반환되지 않는 사용자 환경에 대해서는지도를 숨기고 일부 텍스트를 표시 할 수 있습니까?

document.getElementById('map_canvas').style.display = 'none'; 
document.getElementsByTagName('body')[0].innerHTML = 'Geocode was not successful for the following reason: " + status;

그러나 당신이 당신의 솔루션 :

출처

2011-12-07 14:03:00

'결과 [0]은 google.maps.LatLng 객체가 .geometry.location'. '.Pa'와'.Qa' 대신'results [0] .geometry.location.lat()'와'results [0] .geometry.location.lng()'을 사용해야합니다. 그리고 가지고있다). –

고마워, 나는 대답을 고쳤다 :) –

1) 구글지도 한 위치로 초기화의 일반 사용자 인터페이스에 크게 의존해야한다 여기에 뭘 원하는지, 당신은 그것을 다른 말. 따라서 두 가지 옵션이 있습니다 :

a)Move the map instantiation into the geocode callback. 
b)Initialize to the location you want. To do this you will need to read a bit more about how google maps works instead of just using their basic example.

2) 연마 경고 대신 멋진 오류 메시지는 html에 추가하십시오.

<p id="errorMessage" style="display:none;">Sorry, couldn't find that address</p>

경고 대신 알림을 표시하십시오.

} else { 

    // alert("Geocode was not successful for the following reason: " + status); 
    document.getElementById('errorMessage').style.display = "block";    
}

구글지도는 최신 버전의 멋진 오버레이를 가지고 있지만, 대부분 map--없는 일반 텍스트 정보의 위치와 영역의 범위를 둘러싸고 있습니다. 따라서 위와 아래의 HTML 페이지에서지도 외부에서 고유 한 UI를 만들어야합니다. 당신이 정말로지도의 상단에 보여주고 싶은 경우에는 ERRORMESSAGE의 DIV에 다음과 같은 CSS 속성을 설정할 수 있습니다

#errorMessage { 
    position:absolute; 
    left: 50%; 
    top: 30%; 
}

출처

2011-12-07 14:04:29 jazzinthemorning

지오 코딩이 포함 된 간단한 Google지도

답변

관련 문제