ノウハウ色々
モジュールいろいろ
リンク集
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー


当サイト構築活用本
  (amazonリンク)

XOOPSコミュニティサイト構築ガイド

Customizing XOOPS

Googleマップ+Ajaxで自分の地図をつくる本

PHPサイバーテロの技法―攻撃と防御の実際

メイン
   《01》XOOPSノウハウなど
     かんたんルート図<1.5にup>

スレッド表示 | 古いものから 前の記事 | 次の記事 | 下へ
話題
かんたんルート図<1.6にup>マーカーなど利用可に
投稿者: fanrun7     投稿日時: 2006-11-27

2006-11-27 マーカーや地図の説明文も記入できるようにしました。
2006-9-29 miniMAPを表示できるようにしました。

1.かんたんルート図とは

googleMAPを使い簡単にルートを描けるようにする仕組みです。画面左の
メニューから実際に使ってみることが出来ます。

当サイトにはmygmapというgoogleMAPを使ったルートを描ける仕組みが
ありますが、そちらとは異なりxoops(コンテンツ管理システムの一種)を
前提としないので、ほとんどのホームページに設置可能です。

その替りに、住所や駅名から場所を探すとか、場所を登録しておき、呼び
出すというような機能はありません。

描いたルートは、そのタイトルとともに、友人などにメールで教えたり、
お気に入りに登録することが出来ます。ただ、urlはとても長くなりますので
途中で切れないように注意する必要があります。


2.利用上の注意

「3.基本的設置方法」にあるgoogleのAPIキー取得のホームページに、
英語で利用条件が書いてあります。一般的な無保証とか、あるがままの利用
とかの条件の他に「有償ホームページ上での利用の禁止」というのがあり
ますので注意してください。その他の条件も勿論すべて守る必要があります。

当サイトのサービスの利用も、無保証、あるがままの利用です。レスポンス
が遅いとか、止まってしまうこともあるかもしれません。

当サイトのサービスは以上の条件を了解される方のみ利用してください。


3.基本的設置方法

・当サイトからmgmap_sample.zipをダウンロードして解凍
・googleからAPIキーを取得
・解凍したmgmap_sample.htmlの該当箇所にAPIキーを書く
・APIキーを書いたmgmap_sample.htmlをあなたのサーバに転送

以上4ステップで使えるようになります。以下、補足説明です。

・当サイトからmgmap_sample.zipをダウンロードして解凍
    下記「mgmap_sample.zip」をクリックするとダウンロードされます。
    WindowsXPであれば、ダウンロードしたmgmap_sample.zipを
    ダブルクリックすれば解凍できます。

   mgmap_sample.zip(2kB)

・googleからAPIキーを取得
    APIキーとはgoogleがホームページ毎に発行する100桁程度の英数字
    の文字列です。ホームページ毎に内容が異なるので、違うホーム
    ページ用のものは使えません。
    以下のurlでAPIキーを取得できます。
        http://www.google.com/apis/maps/signup.html
    googleにログインしていない場合は、ログインを求められます。
    ユーザー登録していない場合は、こちらから登録できます。

・解凍したmgmap_sample.htmlの該当箇所にAPIキーを書く
     解凍したできたフォルダ内に「mgmap_sample.html」という
    htmlファイルがあります。
     このファイル中の■の部分をAPIキーに置き換えてください。途中
    改行や空白が入ったりしないように注意してください。
     このファイルは日本語のコードがUTF-8という種類で、Windowsで
    一般に使われるShift-JISとは異なっています。そのため、編集には
    注意が必要です。解凍したファイルをWindowsXP標準のメモ帳で編集
    してください。「名前をつけて保存」の画面で文字コードが「UTF-8」
    になっている事を確認してください。

・APIキーを書いたmgmap_sample.htmlをあなたのサーバに転送
    転送する際に文字コード変換されないように注意してください。
    ファイルの名前は自由に変えてもらって構いません。


4.表示内容を変える

基本的に以下の範囲で変えてください。

   
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<!-- googleMAPルート記入ツールサンプル 2006-9-29 by 森を走ろう企画 -->
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">v\:* {behavior:url(#default#VML);}</style>
  上記の「<html」から「/style>」までは、コメントの部分を除き、
  そのままにしてください。
<title>森を走ろう!かんたんルート図サンプル</title>
</head>
<body>
<h2>森を走ろう!かんたんルート図サンプル</h2>
<p>当サイトはgoogleMAPを使いルート記入、編集などを出来るように<br />
するサンプルです。地図の大きさや表示内容の変更は簡単にできます。<br />
説明は<a target="_blank" href="http://www.asobox.com/dna/modules/newbb/
viewtopic.php?topic_id=26&post_id=33&order=0&viewmode=flat&pid=0&forum=3
#forumpost38">こちら</a>をご覧ください。
  上記の「<title 」から「ください。」までの間は自由にhtmlの書き方に
  従って、変えてかまいません。

<!-- かんたんルート図 ここから ------------------------------------->
<div id="MGmapForm"></div>
  上記の行は変えないでください。この後、下記の「<span」の前まで
  htmlを書くことができます。
<span style="font-size:12px;" id="mgmap_poweredby"><a target="_blank"
href="http://www.asobox.com/o/">powered by 森を走ろう!</a></span>
  ここまで変えないで下さい。この後、下記の「<script」の前まで
  htmlを書くことができます。
<script src="http://maps.google.co.jp/maps?file=api&v=2&key="
 type="text/javascript"></script>
  上記の■をgoogleから取得したAPIキーに書き換えてください。
<script type="text/javascript">
//<![CDATA[
var _MGmap_version = '1.6';		// MGmap version
  ここまでは変えないでください。1.6になりました。
var _MGmap_colors_init = '000000/ff0000/00ff00/0000ff/ffaa00/00ffff/ff00ff';
                                        // RGB color for color buttons
  ルートに付与する色をRGB値で指定します。省略値は7個ですが、
  10個まで指定可能です。少なくしても構いません。
var _MGmap_pagetitle_prefix = 'かんたんルート図 / ';
                    // pagetitle prefix
  画面のタイトル欄に入力して、設定ボタンを押すことで、
  ブラウザ上部のバーに表示するタイトルを設定できますが、
  その際に入力した内容の前につける文字列が指定できます。
var _MGmap_control = 'Large/Yes/Yes';    // slider/scale/miniMAP
  画面左のズーム・移動制御部品を大型(Large)にするか、
  小型(Small)にするか、表示しない(No)かを「/」の前の部分で
  指定できます。「/」の後には、縮尺を表示する(Yes)か、
  しない(No)を指定できます。地図右下にminiMAPを表示するには
  3番目にYesを指定します。
var _MGmap_width = 500;         // map width(pixel)
var _MGmap_height = 300;        // map height(pixel)
  地図の幅と高さをピクセル単位で指定できます。
var _MGmap_lng_init = 137.2412109375;    // initial longitude
var _MGmap_lat_init = 37.52715361723378;// initial latitude
var _MGmap_zoom_init = 4;        // initial zoom level
  最初に表示する際の中心の経度、緯度、ズームレベルを
  指定できます。最初に表示したい状態にしてプレビューした時の
  urlにそれぞれlng=137.1&lat=38.1&z2=4というような形式で
  入っているので、その値を転記してください。
//]]>
</script>
<link rel="stylesheet" media="all" href="mgmap16.css" type="text/css" />
<script src="http://www9.asobox.com/mgmap/mgmap16.js"
type="text/javascript"></script>
  バージョン1.5と変わりました。ここまで変えないで下さい。
  この後、下記の「</body」の前までhtmlを書くことができます。
</body>
</html>

かんたんルート図<1.5にup>
投稿者: fanrun7     投稿日時: 2006-9-23

2006-9-29 miniMAPを表示できるようにしました。

1.かんたんルート図とは

googleMAPを使い簡単にルートを描けるようにする仕組みです。画面左の
メニューから実際に使ってみることが出来ます。

当サイトにはmygmapというgoogleMAPを使ったルートを描ける仕組みが
ありますが、そちらとは異なりxoops(コンテンツ管理システムの一種)を
前提としないので、ほとんどのホームページに設置可能です。

その替りに、住所や駅名から場所を探すとか、場所を登録しておき、呼び
出すというような機能はありません。

描いたルートは、そのタイトルとともに、友人などにメールで教えたり、
お気に入りに登録することが出来ます。ただ、urlはとても長くなりますので
途中で切れないように注意する必要があります。


2.利用上の注意

「3.基本的設置方法」にあるgoogleのAPIキー取得のホームページに、
英語で利用条件が書いてあります。一般的な無保証とか、あるがままの利用
とかの条件の他に「有償ホームページ上での利用の禁止」というのがあり
ますので注意してください。その他の条件も勿論すべて守る必要があります。

当サイトのサービスの利用も、無保証、あるがままの利用です。レスポンス
が遅いとか、止まってしまうこともあるかもしれません。

ブラウザ上のjavascriptのみで実現しているサービスのため、ブラウザに
よる違いをサーバ側で吸収する事ができません。そのため、例えばNetscape
のバージョン7以前とInternetExplorler6とでは日本語タイトルの互換性
がありません。

当サイトのサービスは以上の条件を了解される方のみ利用してください。


3.基本的設置方法

・当サイトからmgmap_sample.zipをダウンロードして解凍
・googleからAPIキーを取得
・解凍したmgmap_sample.htmlの該当箇所にAPIキーを書く
・APIキーを書いたmgmap_sample.htmlをあなたのサーバに転送

以上4ステップで使えるようになります。以下、補足説明です。

・当サイトからmgmap_sample.zipをダウンロードして解凍
    下記「mgmap_sample.zip」をクリックするとダウンロードされます。
    WindowsXPであれば、ダウンロードしたmgmap_sample.zipを
    ダブルクリックすれば解凍できます。
   mgmap_sample.zip(2kB)

・googleからAPIキーを取得
    APIキーとはgoogleがホームページ毎に発行する100桁程度の英数字
    の文字列です。ホームページ毎に内容が異なるので、違うホーム
    ページ用のものは使えません。
    以下のurlでAPIキーを取得できます。
        http://www.google.com/apis/maps/signup.html
    googleにログインしていない場合は、ログインを求められます。
    ユーザー登録していない場合は、こちらから登録できます。

・解凍したmgmap_sample.htmlの該当箇所にAPIキーを書く
     解凍したできたフォルダ内に「mgmap_sample.html」という
    htmlファイルがあります。
     このファイル中の■の部分をAPIキーに置き換えてください。途中
    改行や空白が入ったりしないように注意してください。
     このファイルは日本語のコードがUTF-8という種類で、Windowsで
    一般に使われるShift-JISとは異なっています。そのため、編集には
    注意が必要です。解凍したファイルをWindowsXP標準のメモ帳で編集
    してください。「名前をつけて保存」の画面で文字コードが「UTF-8」
    になっている事を確認してください。

・APIキーを書いたmgmap_sample.htmlをあなたのサーバに転送
    転送する際に文字コード変換されないように注意してください。
    ファイルの名前は自由に変えてもらって構いません。


4.表示内容を変える

基本的に以下の範囲で変えてください。

   
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<!-- googleMAPルート記入ツールサンプル 2006-9-29 by 森を走ろう企画 -->
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">v\:* {behavior:url(#default#VML);}</style>
  上記の「<html」から「style>」までは、コメントの部分を除き、
  そのままにしてください。
<title>森を走ろう!かんたんルート図サンプル</title>
</head>
<body>
<h2>森を走ろう!かんたんルート図サンプル</h2>
<p>当サイトはgoogleMAPを使いルート記入、編集などを出来るように<br />
するサンプルのサイトです。技術的な説明は<a target="_blank"
href="http://www.asobox.com/dna/modules/newbb/viewtopic.php?topic_id=26&post_id
=33&order=0&viewmode=flat&pid=0&forum=3#forumpost33">こちら</a>をご覧く
ださい。
  上記の「<title 」から「ください。」までの間は自由にhtmlの書き方に
  従って、変えてかまいません。
<div id="MGmapForm"></div>
  上記の行は変えないでください。この後、下記の「<span」の前まで
  htmlを書くことができます。
<span style="font-size:12px;" id="mgmap_poweredby"><a target="_blank"
href="http://www.asobox.com/o/">powered by 森を走ろう!</a></span>
  ここまで変えないで下さい。この後、下記の「<script」の前まで
  htmlを書くことができます。
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=■"
type="text/javascript"></script>
  上記の■をgoogleから取得したAPIキーに書き換えてください。v=1からv=2になりました。
<script type="text/javascript">
//<![CDATA[
var _MGmap_version = '1.5';        // MGmap version
  ここまでは変えないでください。1.0から1.5になりました。
var _MGmap_width = 500;            // map width(pixel)
var _MGmap_height = 300;        // map height(pixel)
  地図の幅と高さをピクセル単位で指定できます。
var _MGmap_control = 'Large/Yes/Yes';    // slider/scale/miniMAP
  画面左のズーム・移動制御部品を大型(Large)にするか、
  小型(Small)にするか、表示しない(No)かを「/」の前の部分で
  指定できます。「/」の後には、縮尺を表示する(Yes)か、
  しない(No)を指定できます。地図右下にminiMAPを表示するには
  3番目にYesを指定します。
var _MGmap_lng_init = 137.2412109375;    // initial longitude
var _MGmap_lat_init = 37.52715361723378;// initial latitude
var _MGmap_zoom_init = 4;        // initial zoom level
  最初に表示する際の中心の経度、緯度、ズームレベルを
  指定できます。最初に表示したい状態にしてプレビューした時の
  urlにそれぞれlng=137.1&lat=38.1&z2=4というような形式で
  入っているので、その値を転記してください。ズームの数字が変わりました。
var _MGmap_colors_init = '000000/ff0000/00ff00/0000ff/ffaa00/00ffff/ff00ff';
                                        // RGB color for color buttons
  ルートに付与する色をRGB値で指定します。省略値は7個ですが、
  10個まで指定可能です。少なくしても構いません。
var _MGmap_pagetitle_prefix = 'かんたんルート図 / ';
                    // pagetitle prefix
  画面のタイトル欄に入力して、設定ボタンを押すことで、
  ブラウザ上部のバーに表示するタイトルを設定できますが、
  その際に入力した内容の前につける文字列が指定できます。
//]]>
</script>
<script src="http://www9.asobox.com/mgmap/mgmap.js"
type="text/javascript"></script>
  ここまで変えないで下さい。この後、下記の「<body」の前まで
  htmlを書くことができます。
</body>
</html>

スレッド表示 | 古いものから 前の記事 | 次の記事 | トップ
Copyright(c) 1996-2010 森を走ろう企画    powered by XOOPS