web-dev-qa-db-ja.com

住所をGoogleマップリンクに変換する方法（NOT MAP）

しばらくの間Webで（Googling）を見た後、私は次のようなアドレスを取るものが何も見つからないことがわかります。

1200 Pennsylvania Ave SE、ワシントン、コロンビア特別区、20003

クリック可能なリンクに変換します。

http://maps.google.com/maps?f=q&source=s_q&hl=ja&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が推奨されているか、これに関する有用な情報です。

google-mapshyperlinkgoogle-maps-urls
270
Phill Pafford

これはどう？

https://maps.google.com/?q=1200 Pennsylvania Ave SE、ワシントン、コロンビア特別区、20003

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

緯度経度がある場合は、以下のURLを使用してください

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

例： maps.google.com/?ll=38.882147,-76.99017

UPDATE

2017年現在、GoogleはクロスプラットフォームのGoogle Maps 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
632
Chris B

私は試合に非常に遅れていることを知っていますが、後世のために貢献したいと思いました。

私は<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);             
    });
});
65
Michael Jasper

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 /

それが役立つことを願っています。

10
Colin P

これはどうですか： http://support.google.com/maps/bin/answer.py?hl=ja&answer=72644

3
Nolmë Informatique

これは私がグーグルマップの記事の一つから見つけたものです：

  1. Googleマップを開く。
  2. 埋め込む地図またはストリートビューの画像が地図上に表示されていることを確認します。
  3. 左上隅のメインメニューをクリックします。
  4. マップを共有または埋め込むをクリックします。
  5. 表示されたボックスの上部で、[地図を埋め込む]タブを選択します。
  6. 希望のサイズを選択してから、コードをコピーしてWebサイトまたはブログのソースコードに貼り付けます。

注： Liteモード でマップを使用している場合、埋め込むことはできません。地図。交通情報やその他の地図情報は埋め込み地図では利用できない場合があることに注意してください。

enter image description here

2
PCM
http://maps.google.com/maps?q=<?php echo urlencode($address); ?>

エンコードurは収束し、スペースやallのようにすべての余分な要素を追加します。そのため、追加する特殊文字を気にせずにプレーンテキストコードをdbから簡単に取得して使用できます。

1
dhpratik

私は私が私が場所のあらゆる住所のためにこれを達成しなければならなかった（それぞれ住所タグで包まれた）同様の問題を抱えていた。このjQueryは私にとって役に立ちました。それはそれぞれの<address>タグをつかみ、タグが含んでいるアドレスでグーグルマップリンクにそれを包みます！

$("address").each(function(){

    var address = $(this).text().replace(/\,/g, '');
    var url = address.replace(/\ /g, '%20');

    $(this).wrap('<a href="http://maps.google.com/maps?q=' + url +'"></a>');

});

作業例 - > https://jsfiddle.net/f3kx6mzz/1/

1
Jon Hendershot

最善の方法は、この行を使用することです。

var mapUrl = "http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=16900+North+Bay+Road,+Sunny+Isles+Beach,+FL+33160&amp;aq=0&amp;sll=37.0625,-95.677068&amp;sspn=61.282355,146.513672&amp;ie=UTF8&amp;hq=&amp;hnear=16900+North+Bay+Road,+Sunny+Isles+Beach,+FL+33160&amp;spn=0.01628,0.025663&amp;z=14&amp;iwloc=A&amp;output=embed"

必要に応じて、最初のアドレスと2番目のアドレスを置き換えることを忘れないでください。

作業例を見ることができます

1
Eugene Bosikov

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);
});

このソリューションには、以前に提供されていたソリューションよりも次のような利点があります。

  • <br>内のHTMLタグ（例：<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>

それからそれはちょうどうまくいきます。

1
7over21

http://www.labnol.org/internet/tools/short-urls-for-google-maps/6604/ に短いURLが表示されますそれはかなりうまくいきます

GoogleマップのURLは、IM、ツイート、またはEメールで送信する場合は特に扱いにくいです。 MapOf.itを使用すると、検索パラメータとして場所の住所を指定するだけで、Googleマップに簡単にリンクできます。

http://mapof.it/

私が設計したいくつかのアプリケーションにそれを使用しました、そしてそれは魅力のように働きました。

1
Custom Web

緯度と経度がある場合は、以下のURLの一部または全部を使用できます。

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

たとえば、 https://www.google.com/maps/@31.839472,54.361167,18z?hl=ja

1
Mohammad Fathi MiMFa

また、アドレスを手動でURLENCODEにしたい場合は、 http://code.google.com/apis/maps/documentation/webservices/index.html#BuildingURLs

これを使用してGM標準を満たす特定の規則を作成できます。

0
Ed Meacham

私はこれを見つけて共有したいのですが。

  1. maps.google.co.jpで住所を検索
  2. 右下にある歯車のアイコンをクリック
  3. 「共有または埋め込みマップ」をクリック
  4. 短いURLのチェックボックスをクリックして、結果をhrefに貼り付けます。
0
Unknown-Me

C＃のReplaceメソッドは通常私のために働きます：

foo = "http://maps.google.com/?q=" + address.Text.Replace(" ","+");
0
Mr.Sprung