[google-maps] 주소를 Google지도 링크로 변환하는 방법 (지도 아님)

웹에서 잠시 동안 인터넷 검색을 한 후 다음과 같은 주소를 취하는 것은 없습니다.

12003 펜실베이니아 Ave SE, 워싱턴 DC, 20003

클릭 가능한 링크로 변환합니다.

http://maps.google.com/maps?f=q&source=s_q&hl=ko&q=1200+Pennsylvania+Ave+SE,+Washington,+District+of+Columbia,+20003&sll=37.0625,-95.677068&sspn=44.118686,114.169922 & ie = UTF8 & cd = 1 & geocode = FT5MUQIdIDlp-w & split = 0 & ll = 38.882147, -76.99017 & spn = 0.01064,0.027874 & z = 16 & iwloc = A

jQuery 또는 PHP는 이것에 대한 유용한 정보를 선호했습니다.



답변

이건 어때요?

https://maps.google.com/?q=1200 펜실베이니아 Ave SE, 워싱턴 DC, 20003

https://maps.google.com/?q=term

위도가 길면 아래 URL을 사용하십시오.

https://maps.google.com/?ll=latitude,longitude

예 : maps.google.com/?ll=38.882147,-76.99017

최신 정보

2017 년 현재 Google은 플랫폼 간 Google지도 URL을 만드는 공식적인 방법을 제공합니다.

https://developers.google.com/maps/documentation/urls/guide

당신은 같은 링크를 사용할 수 있습니다

https://www.google.com/maps/search/?api=1&query=1200%20Pennsylvania%20Ave%20SE%2C%20Washington%2C%20District%20of%20Columbia%2C%2020003


답변

나는 경기에 늦었다는 것을 알고 있지만, 후세를 위해 기여할 것이라고 생각했다.

<address>태그를 Google지도 링크로 자동 변환하는 짧은 jQuery 함수를 작성했습니다 .

여기 데모를보십시오.

$(document).ready(function () {
   //Convert address tags to google map links - Michael Jasper 2012
   $('address').each(function () {
      var link = "<a href='http://maps.google.com/maps?q=" + encodeURIComponent( $(this).text() ) + "' target='_blank'>" + $(this).text() + "</a>";
      $(this).html(link);
   });
});

보너스:

또한 링크에서 임베디드 맵을 생성 해야하는 상황을 겪었지만 미래의 여행자와 공유 할 것입니다.

전체 데모보기

$(document).ready(function(){
    $("address").each(function(){
        var embed ="<iframe width='425' height='350' frameborder='0' scrolling='no'  marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+ encodeURIComponent( $(this).text() ) +"&amp;output=embed'></iframe>";
        $(this).html(embed);
    });
});


답변

2016 년 2 월 :

클라이언트 입력 데이터베이스 값을 기반으로 위도 / 경도 생성기를 사용하지 않고이 작업을 수행해야했습니다. 구글은 요즘 위도 / 경도를 정말 좋아합니다. 내가 배운 것은 다음과 같습니다.

1
링크의 시작 부분은 다음과 같습니다 :
https://www.google.com/maps/place/

2
주소를 입력하십시오.

  • 공백 대신 +를 사용하십시오.
  • 도시 앞뒤에 쉼표를 넣으십시오.
  • 우편 번호 및 주 /도를 포함하십시오.
  • #을 아무것도없는 것으로 바꾸십시오.
  • ++ 또는 ++++를 단일 +로 교체

3
장소 뒤에 주소를 입력하십시오 /

4
그런 다음 끝에 슬래시를 넣으십시오.

참고 : 끝에 슬래시가 중요했습니다. 사용자가 링크를 클릭하면 Google은 계속해서 URL에 더 많은 정보를 추가하고이 슬래시 후에 추가합니다.

이 질문에 대한 실제 예 :

https://www.google.ca/maps/place/1200+Pennsylvania+Ave+SE,+Washington,+DC+20003/

도움이 되길 바랍니다.


답변


답변

위도와 경도가있는 경우 벨로우 URL의 일부 또는 전부를 사용할 수 있습니다

https://www.google.com/maps/@LATITUDE,LONGITUDE,ZOOMNUMBERz?hl=LANGUAGE

예를 들면 다음과 같습니다.
https://www.google.com/maps/@31.839472,54.361167,18z?hl=ko


답변

Michael Jasper와 Jon Hendershot의 솔루션에서 차용하여 다음을 제공합니다.

$('address').each(function() {
    var text = $(this).text();

    var q    = $.trim(text).replace(/\r?\n/, ',').replace(/\s+/g, ' ');
    var link = '<a href="http://maps.google.com/maps?q=' + encodeURIComponent(q) + '" target="_blank"></a>';

    return $(this).wrapInner(link);
});

이 솔루션은 이전에 제공된 솔루션보다 다음과 같은 이점을 제공합니다.

  • 에서 HTML 태그 (예 : <br>태그)를 제거하지 <address>않으므로 서식이 유지됩니다.
  • URL을 올바르게 인코딩합니다.
  • 인코딩 후 생성 된 URL이 더 짧고 깨끗하며 사람이 읽을 수 있도록 추가 공간을 축소합니다.
  • 유효한 마크 업을 생성합니다 (Mr.Hendershot의 솔루션 생성은와 <a><address></address></a>같은 <address>인라인 요소 내에서 허용되지 않는 블록 수준 요소로 인해 유효하지 않습니다) <a>.

주의 사항 : <address>태그에 <p>또는 과 같은 블록 수준 요소가 포함되어 있으면 태그에 해당 블록 수준 요소가 포함 되므로이<div> JavaScript 코드는 잘못된 마크 업으로 생성됩니다 <a>. 그러나 다음과 같은 일을하는 경우 :

<address>
  The White House
  <br>
  1600 Pennsylvania Ave NW
  <br>
  Washington, D.C.  20500
</address>

그럼 잘 작동합니다.


답변

이것은 Google지도 기사 중 하나에서 찾은 것입니다.

  1. Google지도를 엽니 다 .
  2. 포함시키려는지도 또는 스트리트 뷰 이미지가지도에 표시되는지 확인하십시오.
  3. 왼쪽 상단에서 기본 메뉴 ☰를 클릭하십시오.
  4. 지도 공유 또는 포함을 클릭하십시오 .
  5. 표시되는 상자 상단에서 내장 지도 탭을 선택합니다 .
  6. 원하는 크기를 선택한 다음 코드를 복사하여 웹 사이트 나 블로그의 소스 코드에 붙여 넣습니다.

참고 : 라이트 모드 에서지도를 사용 하는 경우지도를 포함 할 수 없습니다. 포함 된지도에서 교통 정보 및 기타 일부지도 정보를 사용하지 못할 수 있습니다.

여기에 이미지 설명을 입력하십시오