本文へジャンプ

トップページ > サンプル紹介 > 法則55 ブログ記事にGoogleマップで地図を表示する

サンプル紹介

法則55 ブログ記事にGoogleマップで地図を表示する

地図を表示する(X)HTMLソース【1】

<div id="map" class="map"></div>

地図の大きさを指定するCSSソース【2】

/* 地図が正しく表示されたときのスタイル*/
.map {
    width: 500px;
    height: 300px;
}
/* 地図が正しく表示されなかったときのスタイル*/
.mapError {
    color: #FF0000;
    background: none !important;
}

Google Mapを呼び出すテンプレートソース(head要素内)【3】

<MTIfNonEmpty tag="EntryKeywords">
<script src="http://maps.google.co.jp/maps?file=api&v=2.x&key=(ここにAPI キーを入れる)" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var geocoder;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
geocoder = new GClientGeocoder();
}
}
function moveAddress(){
geocoder.getLatLng("<$MTEntryKeywords$>", showMap);
}
function showMap(latlng){
if (latlng){
map.setCenter(latlng, 15);
var marker = new GMarker(latlng);
map.addOverlay(marker);
}else{
document.getElementById("map").className="mapError";
document.getElementById("map").innerHTML="<p> 地図が正しく表示されていません。<a href=\"https://example.com/contact/\"> お問い合わせフォーム</a> からご連絡ください。</p>";
}
}
//]]>
</script>
</MTIfNonEmpty>

キーワードの住所を地図に表示するテンプレートソース(bodyの属性値)【4】

<body <MTIfNonEmpty tag="EntryKeywords"> onload="load();moveAddress();" onunload="GUnload();"</MTIfNonEmpty>>

リンク

Google Maps API

第3章 ユーザーが使いやすいWebサイトを 作成する法則の一覧

  1. 法則33 特定のカテゴリに属するブログ記事を一覧表示する
  2. 法則34 注目の記事をピックアップして表示させる
  3. 法則35 シークレットタグを使ってブログ記事を分類する
  4. 法則36 Ajaxを利用して人気記事ランキングを表示する
  5. 法則37 最近コメントがあったブログ記事を一覧表示する
  6. 法則38 コメントやトラックバックのあったブログ記事をツリーで表示する
  7. 法則39 MultiBlogを利用して複数ブログの記事を一覧表示する
  8. 法則40 ランダムにブログ記事の一覧を作成する
  9. 法則41 複数のブログから同じタグのブログ記事を抜き出す
  10. 法則42 RSSを利用して外部ブログの記事をまとめて表示する
  11. 法則43 タグを利用して関連記事へのリンクを自動的に表示する
  12. 法則44 同じカテゴリの前後のブログ記事へリンクを作成する
  13. 法則45 a要素にtitle属性を指定してアクセシビリティを向上させる
  14. 法則46 カテゴリを任意の順番に並べ替える
  15. 法則47 パンくずリストを作成する
  16. 法則48 静的なアーカイブページを分割する
  17. 法則49 検索結果がゼロ件のときに代わりの導線を用意する
  18. 法則50 タグ検索結果のURLを短くして利便性を高める
  19. 法則51 OPMLファイルを生成して複数のフィードをまとめて登録させる
  20. 法則52 フィードアイコンはもっとも目に付く位置に配置する
  21. 法則53 「続きを読む」のナビゲーションは的確に配置する
  22. 法則54 商品ごとに問い合わせフォームを作成する
  23. 法則55 ブログ記事にGoogleマップで地図を表示する
  24. 法則56 ブログ記事に5段階評価を付ける
  25. 法則57 同じアーカイブから2つのレイアウトを作成する
取り扱いオンラインショップ