HTML記述のポイント

概要

KsGMap は一部を除き、自由にHTMLを配置することができます。
その為、自分のサイトにシームレスに組み入れることができると思います。

KsGMap が自動生成するナビゲーションなどは、表示部分を指定しておくだけで、内部のHTMLは自動生成されます。

HTMLのカスタマイズ

マップ部分のカスタマイズ

表示するGoogleマップの幅と高さは CSS の width と height で指定します。ピクセル数の他に % 指定も可能です。
KsGMap ではさらに、リキッドデザイン用(画面幅から指定ピクセルマイナスしたサイズ)用の設定も可能です。

なお、マップ部分では、position など一部のCSSが使えませんので注意して下さい。

カテゴリナビとアイテムナビ

カテゴリナビとアイテムナビを表示する部分は、それぞれ <div id="categoryNavi"></div> と <div id="itemNavi"></div> で場所を確保しておいて下さい。

設定値の ksgmap_html_categoryNaviksgmap_html_itemNavi で、上記の id の categoryNaviitemNavi を変更することもできます。

予約ID

KsGMap では内部のHTML処理で ksgmap-- から始まるID(※)を使用しています。
独自に ksgmap-- から始まるIDを作るとバッティングして予期せぬエラーを引き起こす可能性があります。
現在使われていないIDも将来的に使う可能性もあります。
CSS の変更は構いませんが、内容によっては不具合を引き起こすこともあります。

※IDとは <div id="この部分"> のこと(タグ名はdivに限らない)。

文字コード

Google Maps API は文字コード(エンコード)が UTF-8 でなくては動作しません。
HTML の文字コードを UTF-8 にして下さい。文字コードの変換は通常はファイル保存時などに行なえます。
なお、BOMを付けるなどのオプションがある場合、オフ(BOMを付けない)にして下さい。

また、HTML の metaタグ で文字コードを UTF-8 に指定して下さい。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

サイト内の共通のJavaScriptやCSSを用いている場合は、その中の文字コードとマップを載せる文字コードが異なると文字化けや不具合を起こす可能性があります。