programing

텍스트 주소를 사용한 Google 지도와 스트리트 뷰 지도

powerit 2023. 4. 3. 21:48
반응형

텍스트 주소를 사용한 Google 지도와 스트리트 뷰 지도

워드프레스 단일 포스트 페이지에 2개의 커스텀 필드에서 주소를 가져오는 구글 지도가 있습니다.정상적으로 동작하고 있습니다만, 스트리트 뷰 링크/옵션을 추가하려고 합니다.

내 페이지에는--

<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed/v1/place?q=<?php echo $add; ?>,%20<?php  $terms = wp_get_post_terms(get_the_ID(), 'city-type');
  if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
     foreach ( $terms as $term ) {
 if ($term->parent == 0) //check for parent terms only
       echo '' . $term->name . '';      
     }
  } ?>&zoom=17&key=mytoken"></iframe>

그러면 다음과 같은 결과가 나옵니다.

<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed/v1/place?q=100 las vegas ave,%20Las Vegas, NV&amp;zoom=17&amp;key=mytoken"></iframe>

좌표를 사용하지 않고 스트리트 뷰를 추가할 수 있는 방법이 있나요?

좌표를 얻으려고 했는데 약간 어긋나 있더군요

<?php
 function getCoordinates($address){

$address = str_replace(" ", "+", $address); // replace all the white space with "+" sign to match with google search pattern

$url = "https://maps.google.com/maps/api/geocode/json?sensor=false&address=$address";

$response = file_get_contents($url);

$json = json_decode($response,TRUE); //generate array object from the response from the web

return ($json['results'][0]['geometry']['location']['lat'].",".$json['results'][0]['geometry']['location']['lng']);

}

$terms = wp_get_post_terms(get_the_ID(), 'city-type');
 if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
     foreach ( $terms as $term ) {
 if ($term->parent == 0) //check for parent terms only
      echo getCoordinates($add, $term->name, $property_pin);     
     }
  } else {
echo getCoordinates($add, $term->name, $property_pin);
}

?>

이미 지리 코드를 이용해서 좌표를 미리 알아내고 있어요를 들어 지오코드는 이러한 좌표를 제공합니다. 34.0229995,-118.4931421. 그러나 제가 찾고 있는 좌표는 34.050217,-118.259491입니다.

알았어, 내가 알아냈어.

질문의 코드를 이용해서 주소의 좌표를 알아냈어요

<?php

// FUNCTION TO CONVERT ADDRESSES INTO COORDINATES
function getCoordinates($address){

$address = str_replace(" ", "+", $address); // replace all the white space with "+" sign to match with google search pattern

$url = "https://maps.googleapis.com/maps/api/geocode/json?address=$address&key=YOUR_TOKEN_KEY";

$response = file_get_contents($url);

$json = json_decode($response,TRUE); //generate array object from the response from the web

return ($json['results'][0]['geometry']['location']['lat'].",".$json['results'][0]['geometry']['location']['lng']);
}

// THIS GETS MY TOP TERM FROM MY CUSTOM TAXONOMY I.E. NEW YORK, NY
$terms = wp_get_post_terms(get_the_ID(), 'city-type');
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
     foreach ( $terms as $term ) {
 if ($term->parent == 0) //check for parent terms only

// $ADD IS FROM MY CUSTOM FIELD FOR THE ADDRESS I.E. 1460 BROADWAY
     $the_address = getCoordinates($add, $term->name);    
     }
  }; ?>

그리고 아래 구글 임베드 코드(토큰 키와 교환)를 사용했을 뿐입니다.---

<iframe width="100%" height="350" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/streetview?location=<?php echo $the_address; ?>&heading=165&pitch=0&key=YOUR-TOKEN-KEY" allowfullscreen></iframe>

스트리트 뷰 맵을 추가하기 위해서입니다.그래서 지도마다 하나씩 두 개의 디바이를 만들고 클릭 기능을 사용하여 표시하거나 숨깁니다.

jQuery(document).ready(function(){
    $("#sv-link").click(function(){
        $("#rv-box").slideToggle("fast");
$("#sv-box").slideToggle();
});
$("#rv-link").click(function(){
        $("#sv-box").slideToggle("fast");
$("#rv-box").slideToggle();
});

});

그것이 최선의 해결책은 아니라는 것을 알고 더 깊이 파고들 수 있다는 것을 알지만 내가 필요한 것은 이것뿐입니다.한 장소에 여러 이미지/전망이 있는 몇 개의 주소에 문제가 있었습니다.1460 브로드웨이 주소를 사용하는 타임스퀘어 풋 로커가 완벽한 예라고 생각하고 있습니다.

그것 말고도 잘 되는 것 같아요.

구글 지도

언급URL : https://stackoverflow.com/questions/47187171/street-view-map-with-google-maps-using-text-address

반응형