<!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 東京都墨田区押上１丁目１−２<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>
<!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>