住所をGoogleマップリンクに変換する方法(MAPではありません)


297

しばらくウェブで(グーグル)を探した後、次のようなアドレスをとるものは何も見つかりません。

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が推奨されるか、これに関する有用な情報のみ。

回答:


681

これはどう?

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

更新

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 

7
緯度と経度でどのように作成できますか?
nadeem gc 2013

4
ユーザーが新しいGoogleマップを使用している場合、この方法は少し不安定なようです。結果のページをクラシックモードで表示するリンクを作成するには、リンクに追加&output=classicするだけです。全体のものは、次のようになりますので:http://maps.google.com/?q=1200%20Pennsylvania%20Ave%20SE,%20Washington,%20District%20of%20Columbia,%2020003&output=classic
マット・

4
@マットはどうですか?また、output = classicは永遠にとどまることはありません。ユーザーが新しいマップを好む場合はどうなりますか?
クリスB

2
URLを介して地図にドロップピンを取得する方法はありますか?
ノミ14

5
これはまだ偉大な(感謝を@ChrisB!)動作しますが、Googleマップの独自フォーマットは今のように見える https://www.google.com/maps/place/1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003 あなただけの名前を使用して逃げることができます...しかし、いくつかの場所について¶ maps.google.com/?q=www.google.com/maps/place/必ずしも同じ結果を返しません。https://www.google.com/maps/place/White Houseに展開さhttps://www.google.com/maps/place/The+White+House,+1600+Pennsylvania+Ave+NW,+Washington,+DC+20500が、https://maps.google.com/?q=White Houseノースカロライナ州のアンティークストアをくれた
ヘンリー2014年

67

私はゲームに非常に遅れていることはわかっていますが、後世のために貢献したいと思っていました。

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

@Michael Jasper urコードのありがとう... divでマップを取得しました...しかし、問題はピン情報がポップアップを取得することです...これは必要ありません。ピン情報ボックスを開かない方法を教えてくれますか??????。thnx事前に...
2013

3
HTML5 <address>タグは、住所を提供するためのものではなく、コンテンツ(通常は作成者)に関連する連絡先情報を提供するためのものです。developer.mozilla.org/en-US/docs/Web/HTML/Element/address
Neograph734 '19

正解です。共有いただきありがとうございます。結果についてはよくわかりませんが、がなくても機能しましたencodeURIComponent()
moreirapontocom 2017

12

2016年2月:

クライアントが入力したデータベース値に基づいて、緯度/経度ジェネレーターなしでこれを行う必要がありました。Googleは最近、lat / longを非常に気に入っています。これが私が学んだことです:

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/

お役に立てば幸いです。


例が機能する間、私はドイツの住所のためにこれを再現することができませんでした。結局、Chris Bの答え(... /?q = term)を実装しました。
gl03

ありがたいことに、これは現在ドイツの住所でも機能しています。参照:google.com/maps/place/...
ヤニックSchuchmann



2

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>

その後、それはうまくいきます。


私は自分のニーズに合わせてコードを調整するだけで、プロジェクトでソリューションを使用しました。それは今のところ機能します。
Mycodingproject

2

これは、Googleマップの記事の1つから見つけたものです。

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

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

ここに画像の説明を入力してください


わたしにはできる。この埋め込みコードをコピーして、ウェブサイトに貼り付けます。
Kabir Hossain

1

http://www.labnol.org/internet/tools/short-urls-for-google-maps/6604/彼らは非常にうまく機能し、短いURLを表示します

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

http://mapof.it/

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


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

エンコードur変換し、スペースなどのすべての追加要素を追加します。そのため、追加する特殊文字を気にすることなく、dbからプレーンテキストコードを簡単にフェッチして使用できます。


1
encodeURIComponentはjavascriptです。urlencode($ address);を使用する必要があります。
ximi 2013

1

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

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

同様の問題があり、サイトのすべてのアドレス(それぞれがアドレスタグで囲まれています)に対してこれを実行する必要がありました。jQueryのこの部分は私のために働いた。各<address>タグを取得し、タグに含まれるアドレスを含むGoogleマップリンクでラップします。

$("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/


2
文字列を手動でURLエスケープしようとする代わりに、代わりに使用できますencodeURIComponent
Samuel

0

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

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


これにより、残念ながら404が発生します。
Darren Monahan

1
ごめんなさい。このコメントは非常に古いものです...この質問で使用されていたAPIのバージョンがまだ存在するのではないかと思いますが、参照に使用されたリンクは次のとおりです:web.archive.org/web/20110420023220/https
Ed Meacham

0

C#のReplaceメソッドは通常、私にとっては機能します。

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

0

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

  1. maps.google.comで住所を検索します
  2. 右下の歯車アイコンをクリックします
  3. 「共有または埋め込みマップ」をクリックします
  4. 短いURLチェックボックスをクリックして、結果をhrefに貼り付けます。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.