web-dev-qa-db-ja.com

新しいウィンドウで開くGoogleマップ

私は 'Venue'と呼ばれるカスタム投稿タイプを持っています、そして私は私のユーザがその会場への地図、基本的にその会場の名前とその住所を持つ地図上の単なるマーカーを作成できることを望みます。重要なのは、地図の小さなスナップショットを作成し、Webサイトのユーザーが新しい地図またはタブで地図全体をクリックして開くことです。

WordPressでどうやってこれを作成できますか？ WordPress用のほとんどのGoogleマッププラグインでは、マップをページに直接埋め込むことができますが、クリックして新しいタブで地図全体を開くことができます。

ありがとう

map
3
John

そのため、Googleのカスタム埋め込みコードを使用すると、iframeがすべてのクリックを吸い込むため、リンクをトリガーできないという問題があります。

私が見つけた解決策は Google Static Maps を使って私が発見した Google Static Maps を使うことです。

ユーザーがクリックしてマップをナビゲートするまではロードが速くなり（JavaScriptは不要）、次にライトボックスにポップアップ表示したい（wp-fancyboxを使用します）ことが私の優先事項です。上のプラグインはWP v.3 + cosのためにまだ機能するかもしれません、それはかなり単純に見えます、しかし私は試しませんでした。

代わりに、私は私のテンプレートに以下を埋め込んだ：

$static_map = '
<img alt="Googlemap" src="http://maps.google.com/maps/api/staticmap?center='. $location
.'&markers=small|' . $location
.'&zoom=14'
.'&size=480x340'
.'&sensor=false"/>';

$popup_map = '
http://maps.google.com.au/maps?q='. $location
.'&f=q&hl=en&geocode=&mrt=all&ie=UTF8&hq=&'
.'hnear=' . $location 
.'&z=14&iwloc=&output=embed';

$map = '
<div class="map clearfix">
    <a class="iframe" href="'. $popup_map . '">
    ' . $static_map . '
    </a>                
</div>' ."\n";

print($map);
  • $ locationは単なる住所で、空想はありません（10 Monkey St、Jungletown、Madagascar）
  • $ popup_mapで ＆iwloc = blankのままにしておくと、他のparamsのcosにあまり触れていないテキストの吹き出しが隠れます。

それが役立つことを願っています！ （十分な改善の余地があります）乾杯、ティム

2
ptim

あなたは彼らがあなたのサイト上のより大きな地図に行きたいですか、それともmaps.google.comのような何かに行きたいですか？ GoogleのGoogleマップにリンクしたい場合は、リンクにtarget="_blank"を追加するだけで、次のように表示できます。

<a href="http://www.destinationurl.com" target="_blank">Some Text or Image goes here</a>

あるいは、iframeでGoogleマップを開くようにLightbox/Thickboxを設定するオプションが常にあります。 Thickbox のようなものはこれのために働くかもしれません。

Web開発の一般的な経験則として、サイトのリンクをクリックしたときにWebサイトの訪問者に新しいウィンドウやタブを強制的に開かせたくはありません。そうではなく、あなたはあなたのサイトにその情報をできるだけ含めたいと思っています。これはあなたのSEOの存在を助け、低い直帰率を助けるでしょう。

0
NW Tech