グーグルマップ作成ノート 2-1・会社アクセス地図の作成

投稿日:

グーグル地図を使って、会社案内(アクセス地図)を作成してみましょう。
Web上で、便利で、簡単にできる作成ツールを探してみました。

まずは、「無料地図の0円のマップ屋さん」のHPから、地図を作ってみました。

メニューに従って、地図の大きさ、会社の位置、情報ウィンドウ内の情報、アイコンを指定して、作成されたタグを貼れば、ハイできました。

「入力に従って作成されたhtmlタグ」
 <script type="text/javascript">
 egmap_width = "600px";<!-- 地図の横幅 -->
 egmap_height = "450px";<!-- 地図の縦幅 -->
 egmap_lat = 34.3934829;<!-- マーカーの緯度 -->
 egmap_lng = 132.468033;<!-- マーカーの経度 -->
 egmap_zoom = 17;<!-- 地図のズーム -->
 egmap_open_info_window_type = 1;<!-- 情報ウィンドウ表示 -->
 egmap_wheel_zoom_type = 1;<!-- 地図の伸縮 -->
 egmap_icon_url = "http://www.egmap.jp/static/images/icon/arrow_aqua.png";<!-- マーカー -->
 egmap_address = "広島市中区橋本町10-10 広島インテスビル1F<br />(平日)    8:30~17:15 ( 月曜日は19:00 まで )<br />(第2土曜日)9:30~16:00<br />日祝は休み";
 egmap_name = "街角の年金相談センター 広島";
 egmap_tel = "082-227-1391";
 egmap_url = "https://www.nenkin.go.jp/section/soudan/hiroshima/centerhiroshima.html";
 egmap_email = "";
 egmap_image_url = "";
 egmap_image_layout_type = 1;
 </script>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript" src="http://www.egmap.jp/amc.js" charset="utf-8"></script>

何種類かアイコンが用意されていますが、独自のマーカーも使えます。
・独自マーカーを
  egmap_icon_url = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E5%BA%83|3196D2|FFFFFF";

・情報ウィンドウは最初は表示させず、クリックで表示することに。
  egmap_open_info_window_type = 2;

・情報ウィンドウの画像を追加します。
  egmap_image_url = "http://www.shakaihokenroumushi.jp/img/btn_katsuyou_01.gif"

そうすると次のようになります。マーカーをクリックしてくださいね。

-->