JavaScript/HTML5おぼえがき

JavaScriptJavaScript/HTMLサイトマップホーム

GoogleMap・ほか

Googleマップに、マーカ、吹き出し、ラインの設定ができます。
Google Maps JavaScript API のアプリケーションAPIキーを取得して########に指定してください。APIキーは ここから APIを有効にして、APIキーを作成して下さい。

Googleマップ表示   戻る

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>地図</title>
<script    src="https://maps.googleapis.com/maps/api/js?key=#####&callback=initMap" async defer></script>
<!--Google Maps JavaScript API のアプリケーションAPIキーを取得して#####に指定してください、-->
<SCRIPT>
function ini(){
  var position = new google.maps.LatLng(35.7100627,139.8107004) ; //経度、緯度の指定
  var options = { zoom:17, //ズーム指定
         center:position, //緯度・軽度の指定
                  mapTypeId:google.maps.MapTypeId.ROADMAP } ;
  var map = new google.maps.Map(document.getElementById("sample"),options) ; //地図の埋め込み指定

  // マーカと吹き出しの表示

  marker = new google.maps.Marker({position:position,map:map,icon:'ball0402.gif'}); //マーカーの追加、マーカーを立てる位置、地図の指定
                                                                                    //マーカーの画像指定(指定しない場合は標準マーカが表示される
                                                                //吹き出しの内容(HTMLのタグで指定する)
  msg = '<div>〒131-0045 東京都墨田区押上1丁目1−2<br>tel:0570-550-634<br><a href="http://www.tokyo-skytree.jp/">ホームページはこちら</a></div>' ;
  infoWindow = new google.maps.InfoWindow({ content: msg });    //吹き出しの内容を追加する
  marker.addListener('click', function() { infoWindow.open(map, marker); }); //マーカをクリックすると吹き出しを表示する
  infoWindow.open(map, marker); //吹き出しを初期表示する

  // ラインを引く座標の配列を作成 

  var points = [ 
      new google.maps.LatLng(35.7100627,139.8107004), 
      new google.maps.LatLng(35.7096000,139.8101004), 
      new google.maps.LatLng(35.7096000,139.8113004), 
      new google.maps.LatLng(35.7100627,139.8107004) 
      ]; 
  // ラインを作成 
  var polyLineOptions = { 
      path: points,           //座標テーブルの指定
      strokeWeight: 5,        //線の太さ
      strokeColor: "#0000ff", //線の色 
      strokeOpacity: "0.5"    //線の透過度
      }; 
  // ラインを設定 
  var poly = new google.maps.Polyline(polyLineOptions); 
      poly.setMap(map);
}
</script>
</head>
<body onload="ini();">
<div id="sample" style="width:640px; height: 400px;"></div>
</body>
</html>

Googleマップ(マーカの種類)   戻る

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>地図</title>
<meta name="viewport" content="width=device-width">
<script    src="https://maps.googleapis.com/maps/api/js?key=#####&callback=initMap" async defer></script>
<!--Google Maps JavaScript API のアプリケーションAPIキーを取得して#####に指定してください、-->
<SCRIPT>
function ini(){
  var myOptions = {
  zoom: 10,                                     //ズーム指定
  center: new google.maps.LatLng(36,139.3),    //表示の中心座標
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

  marker = [] ;
  infoWindow = [] ;
  dsp(1,36,139.1,google.maps.SymbolPath.CIRCLE,"#00ff00","●") ;
  dsp(2,36,139.2,google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,"#ff0000","↓") ;
  dsp(3,36,139.3,google.maps.SymbolPath.FORWARD_CLOSED_ARROW,"#ff0000","↑") ;
  dsp(4,36,139.4,google.maps.SymbolPath.BACKWARD_OPEN_ARROW,"#0000ff","▼") ;
  dsp(5,36,139.5,google.maps.SymbolPath.FORWARD_OPEN_ARROW,"#0000ff","▲") ;
} 

function dsp(n,ido,keido,tp,col,msg) {       // 番号、緯度、経度、マーカータイプ、色、吹き出し内容の指定
  position = new google.maps.LatLng(ido,keido) ; //経度、緯度の指定
  marker[n] = new google.maps.Marker( { position:position,map:map } ) ;
  si = {
       fillColor: col,                //塗り潰し色
	fillOpacity: 0.3,              //塗り潰し透過率
	path: tp,                      //マーカータイプ
	scale: 10,                      //マーカーサイズ
	strokeColor: "#000000",        //枠の色
	strokeWeight: 1.0  }           //枠の透過率} ;  
  marker[n].setIcon( si ) ;  

  infoWindow[n] = new google.maps.InfoWindow({ content: msg });    //吹き出しの内容を追加する
  marker[n].addListener('click', function() { infoWindow[n].open(map, marker[n] ) ; } ) ; //マーカをクリックすると吹き出しを表示する
  infoWindow[n].open( map, marker[n] ) ;   //吹き出しを初期表示する
}
</script>
</head>
<body onload="ini()">
<div id="map_canvas" style="width:800px; height: 600px;"></div>
</body>
</html>

JavaScriptJavaScript/HTMLサイトマップホーム