Google Mapにマーカー(目印)を表示する

こんにちわ、開発者のⅠです。

さて、前回は便利機能の表示の切替についてお話しましたが、今回はマーカーを表示させる方法についてお話したいと思います。

マーカーは皆さんご存知でしょうか？
Google Map上で建物などのスポットをクリックしたり、キーワード検索を行うと現れる"赤い目印"のことです。
なんとなく愛嬌がありますね。


それでは早速、実践してみましょう。

マーカーを表示させるには、経度と緯度が必須です。
以下のコードを、 関数 initializeに追加してみてください。

var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

var markers = [
    ['東京タワー',35.658589, 139.745615],
    ['浅草 雷門',35.711020, 139.796336],
    ['中央本線 笹子駅',35.603862, 138.825087],
    ];
for (var i = 0; i < markers.length; i++) {
var name = markers[i][0];
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
createMarker(latlng,name,map)
}

さらに、以下の関数を新規に追加します。

function createMarker(latlng,name,map)
{
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({position: latlng,map: map});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(name);
infoWindow.open(map,marker);   
});
}

これで、三箇所にマーカーが表示されていると思います。 しかし、この方法ではマーカーを表示させたい箇所が増減した場合にその都度、ソースの編集が必要になります。 次回は、マーカーの座標を外部ファイルから読み出す方法についてお話したいと思います。 それでは、また！

Read More

HTMLのForm要素について

HTMLのForm要素が忘れがちだったので一覧にまとめてみました。

■要素一覧
action     ：送信先ファイルのURL
method     ：データの送信方法（get か post）（省略するとgetになる）
enctype     ：送信時のデータ形式
accept-charset     ：送信時の文字コード
novalidate  new     ：入力チェック (バリデート) せずに送信
autocomplete  new     ：オートコンプリート機能のON,OFF
name     ：フォームに固有の名前をつける
target     ：結果を表示するウィンドウを指定

■サンプル

【送信したい部品】

<p>お名前：<input type="text" name="name"></p>
<p><input type="submit" value="送信する"></p>

↓
【Formでくくる】

<form action="search.aspx" method="post">
<p>お名前：<input type="text" name="name"></p>
<p><input type="submit" value="送信する"></p>
</form>

actionに送信先のURL
methodに送信方法を記述してみました。


■getとpostとは

【method="get"とは】
特徴としては、クエリストリング（フォームの内容）がactonで指定されたURLの「？」の後につけて送信されます。
つまりデータがURLにくっつきます。
ですので、短いデータの時に使われるようです。

【method="post"とは】
postでは、クエリはURLと連結されず、各データ自体が送信されます。
なので容量の大きいデータの送信が可能になります。

Read More

Google Mapのカスタマイズ

こんにちわ、無性にかまぼこが食べたい開発者のⅠです。
明日から３連休！という方もいらっしゃると思いますが、地域によっては天気が思わしくないようですので、外出される方は十分ご注意ください。

それでは、前回から引き続き、Google Maps JavaScript APIに関係するお話をしたいと思います。

Google Mapを無事に表示出来た方、もう少しカスタマイズしてみましょう。

マップのレイアウトにかかわるvar optionのプロパティをもう少し紹介しておきますと、


① mapTypeControl: (true/false)

「地図⇔航空写真」を切り替えるボタンの表示・非表示を切り替えます。
ページに表示するマップのサイズとの兼ね合い等の理由で非表示にしたい方もいらっしゃると思います。その場合には、"false"に設定しましょう。


② streetViewControl: (true/false)

「ストリートビュー」の機能の表示・非表示を切り替えます。
余談ですが、APIを利用して埋め込んだMapでも公式ページと同じように表示できることに驚きました……。さすが、Googleですね。


この二つをJavaScriptに追加してみると、このようになります。

 google.maps.event.addDomListener(window, 'load', function () {
var map = document.getElementById("map_canvas");
 var options = {
  zoom: 11,
  center: new google.maps.LatLng(35.360667, 138.727775),
  mapTypeId: google.maps.MapTypeId.ROADMAP
  
//↓ここから↓
streetViewControl: false,
  mapTypeControl: false  
//↑ここまで↑
};
  new google.maps.Map(map, options);
 });

便利機能だからと言ってとりあえず残すのではなく、そのページの趣旨や見た目に合わせて表示を切り替えてみると良いかもしれませんね。

それでは今回はここまでです。

Read More

「♡ ;」はなんでしょう？

こんにちは！Sです。
タイトルを見てすぐにHTMLの特殊文字だ！とピンときた方はプロですね。
今日は特殊文字のお話です。

特殊文字といえば
" 　 & 　 < 　 > 　   　 &copy
などが有名ですが、実は他にもものすごく沢山あります。
今日は「♡」をどうしても出したくて改めて一覧表を調べました。
（「♡」の答えは「♡」でした。)

その際、役に立ったサイトもまとめておきます♪

▼特殊文字コード表
http://www.shurey.com/js/labo/character.html

▼エンコードの便利ツール
http://www.tagindex.com/tool/url.html

Read More

URL最後のスラッシュとは

URL最後のスラッシュがない

こんにちは山田です。
雑誌とかテレビを見ているときに気になってURLをアクセスしてみると
あれ、NotFound…　ないじゃんということが、、、あるかもしれませんね。

さて、
お客さんに印刷して渡したURLに最後スラッシュがついていなかったということになっておりました。
実際にURLを開いてみると　NotFound…
その時の対応の話です。

正：http://sample.com/contents/0001
誤：http://sample.com/contents/0001/

一般的な人からするとなくてもあっても一緒なんじゃないかと思われがちな箇所だと思います。
（僕もチラシ屋さんだったらあまり気にしなそう）

豆知識として
そもそもURLの最後のスラッシュには「トレイニングスラッシュ」という名前があるようです。

というわけで、
誤っているURLを正しいURLへ301リダイレクトさせてみました。

開発環境：ASP.NET2.0
IIS：ver8.5

web.config
<system.webServer>
　～
　<rewrite>
  　<rule name="URLの最後にスラッシュをつけてる" stopProcessing="true">
   　 <match url="^contents/([0-9]{7})$" />
   　 <action type="Redirect" url="/contents/{R:1}/" redirectType="Permanent" appendQueryString="true"  />
  　</rule>
　</rewrite>
</system.webServer>

属性
stopProcessing：このルールを適用した場合、そこでルールの処理を終了するかどうかを指定する
　　　　　　　　trueであれば、これ以降のルールは適用しない
　　　　　　　　falseであれば、さらに別のルールで指定した別のURLへリダイレクトされる
　　　　　　　（属性を省略したらfalseになります）
redirectType：このリダイレクトがどういった意味かをレスポンスコードで返すことが出来ます
　　　　　　　（省略）：301　　永続的
　　　　　　　Permanent：301　永続的
　　　　　　　Found：302　　　　検出
　　　　　　　SeeOther：303　　　その他
　　　　　　　Temporary：307　　一時的
appendQueryString：置換時に、現在の URL のクエリ文字列を保持するかどうかを指定する
               trueであれば、クエリ文字列を保持する（つまり、元の URL のクエリ文字列が置換された URL に追加されます）
　　　　　　　　　 falseであれば、クエリ文字列を保持しない　　　　　　　　　
　　　　　　　　　 属性を省略したら既定で TRUE と見なされます。

Read More