0120-899-952 
ホームページ制作YCOM
料金体系
制作について
制作実績
よくある質問
お問い合わせ
ホームページにGoogleMapを表示させる方法はいくつかあります。
一番簡単な方法はGoogleMapからコードをもってきて貼り付ける方法。
誰でも簡単に設置できる。GOOGLEMAPをホームページやブログに載せる方法
一番簡単な方法はGoogleMapからコードをもってきて貼り付ける方法。
誰でも簡単に設置できる。GOOGLEMAPをホームページやブログに載せる方法
でも、ちょっと高度な使い方をしたかったらこの方法では無理なので、
ちょっと高度なGppgleMap APIの使い方を説明。
そんなに難しくないので一度トライしてみてください。
GoogleMAP APIを使えるように準備する
まずはGoogleMAPのAPIを使うための準備です。
GoogleMAPを使うために次のコードを<head></head>に入れます。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
GoogleMAPを表示する場所を用意する
次にGoogleMAPを表示させたい場所に表示領域を作ります。
idは何でもいいですが、スタイルや表示の指示を行うのでわかりすい名前で。
idを変えれば複数のマップを１つのページに設置ができます。
よくわからなければ、このままでいきましょう。
<div id="map"></div>
先ほどマップを表示する場所を指定しましたが、
あのままだと幅も高さもないのでマップが見えません。
cssで先ほどのidに対してサイズを指定します。
あのままだと幅も高さもないのでマップが見えません。
cssで先ほどのidに対してサイズを指定します。
#map{
width: 500px;
height: 320px;
}
GoogleMAPを実際に表示させる
最後に、指定したマップの表示場所に実際にマップを表示させる処理です。
ここが一番ややこしいのですが、とりあえず下のスクリプトをそのまま使ってください。
まずやってみることです。
<script type="text/javascript">
/* map */
function initialize() {
var latlng = new google.maps.LatLng(35, 135);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
// マーカーの設定
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}
</script>
最後に、どのタイミングでマップの表示を指示するかというと、
ページがロードされた後なので、<body>タグにこのように書きます。
ページがロードされたらinitialize()を処理してね、という命令です。
ページがロードされた後なので、<body>タグにこのように書きます。
ページがロードされたらinitialize()を処理してね、という命令です。
<body onload="initialize()">
マップ表示のカスタマイズ
マップのスタイルは自由に変えることができます。
先ほどのmyOptionsという変数で指定している内容
var latlng = new google.maps.LatLng(35, 135);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
座標系は次のヶ所で指定してます
var latlng = new google.maps.LatLng(35, 135);
myOptionは次の属性を設定しています。
| zoom | 地図の拡大縮。 | 0～19で数字が大きくなるほど拡大。 |
|---|---|---|
| center | 地図の中心。 | |
| mapTypeId | 地図の形式 | ROADMAP … 通常の地図 SATELLITE … 航空写真 HYBRID … 写真＋地図 TERRAIN … 地形 |
マーカーを立てる
マーカーは次の個所で表示させてます。
このまま使うといいでしょう。
latlng という変数はマーカーを置く場所を指定しています。
上で指定したものを使ってます。
// マーカーの設定
var marker = new google.maps.Marker({
position: latlng,
map: map
});
このカスタマイズの部分はまだまだいろいろなことができます。
GoogleMapからコードをひっぱってきて貼り付けるより、
いろんなことができるので、そのうち紹介しますね。
