part02
１．完成
２．コード
チェックボックスは消されるのでdocument.writeで書きました
<script>// <![CDATA[ document.write('<form class="map_sisen_form1" name="map_sisen_form1">オーバーレイ選択'); document.write('<input type="checkbox" id="map_sisen_ch0" onclick="myfunc0();" checked/>九州'); document.write('<input type="checkbox" id="map_sisen_ch1" onclick="myfunc1();" checked/>扇状地'); document.write('<input type="checkbox" id="map_sisen_ch2" onclick="myfunc2();" />圏9'); document.write('<input type="checkbox" id="map_sisen_ch3" onclick="myfunc3();" />地震'); document.write('<input type="checkbox" id="map_sisen_ch4" onclick="myfunc4();" checked/>地勢図'); document.write('</form>'); // ]]></script> </p> <!-- 地図を表示する div 要素（id="map_sisen"）--> <div id="map_sisen" style="height: 480px; width: 640px;"> </div> <p> <script>// <![CDATA[ // // 定数設定 // // center // 徳陽駅 var latlng_centers = ['徳陽市 張含韻',31.14252528930545, 104.38185453414917]; // tokuyo // GroundOverlay var latlng_govers = [ [33.969767872206404, 132.08533213186706], // kyusyu [30.226220095590367, 128.343843675141] ]; // marker // 三星堆遺跡,都江堰 var latlng_sisens = [ ['三星堆遺跡',30.992964580094394,104.1998473154064], ['都江堰',30.996201991933507,103.61658486285373] ]; // 美人谷,常徳駅 var latlng_ss = [ ['美人谷 alan',30.87574509526431, 101.89945936203003], ['常徳市 圏9',29.07237455967943, 111.69589519500732] ]; // アイコン画像 var url_icon = [ 'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png', 'http://maps.google.com/mapfiles/ms/icons/red-dot.png' ] // polygon // 扇状地構成 var latlng_polyuppers = [ [30.887065792544163, 104.42847416449035], [31.077209379474276, 103.85203526068176], [31.452842104446127, 104.18128178167785], [31.302475140588633, 104.41285297918762] ]; var latlng_polylowers = [ [30.996201991933507, 103.61658486285373], [30.40783442127569, 103.82302448797668], [30.887065792544163, 104.42847416449035] ]; // jisin // var latlng_jisinm = ["四川大地震の震央と強震域", 30.989, 103.329]; // 震央 var latlng_jisinp = ["強震域",32.290502, 104.862083]; // 強震端 // // 変数定義 // var marker_center; // 徳陽map中央 var map_gover_kyusyu; // 九州地図 GroundOverlay var poly_upper; // 扇状地範囲上側 Polygon var poly_lower; // 扇状地範囲下側 Polygon var poly_jsinn; // 強震域 Polygon // // function // // marker var hoverinfo_center = []; // 吹き出し center var hoverinfo = []; // 吹き出し 四川とss var marker_sisens = []; // マーカー四川 var marker_ss = []; // マーカーss var marker_jisin; // マーカー地震 // marker center function make_marker_center() { // center var latlng = new google.maps.LatLng(latlng_centers[1], latlng_centers[2]); var name = latlng_centers[0]; var pixelOffset = new google.maps.Size(0, -40); var marker = new google.maps.Marker({ position: latlng, zIndex: 5, map: map_sisen }); marker_center = marker; // マーカーにマウスを乗せたときのイベント marker.addListener('mouseover', function() { // infoの位置 hoverinfo_center = new google.maps.InfoWindow({ map: map_sisen, content: name, noSuppress: true, pixelOffset: pixelOffset }); hoverinfo_center.setPosition( latlng ); // マーカーからマウスを降ろしたときのイベント marker.addListener('mouseout', function() { if(hoverinfo_center) hoverinfo_center.close(); }); }); } // marker sisen function make_marker_sisen() { marker_sisens = []; for(var i = 0; i < latlng_sisens.length; i++) { create_Marker(latlng_sisens[i][0],latlng_sisens[i][1],latlng_sisens[i][2],map_sisen,0); } } // marker ss function make_marker_ss() { marker_ss = []; for (var i = 0; i < latlng_ss.length; i++) { create_Marker(latlng_ss[i][0],latlng_ss[i][1],latlng_ss[i][2],map_sisen,1); } } // marker jisin function make_marker_jisin() { marker_jisin = ""; create_Marker(latlng_jisinm[0],latlng_jisinm[1],latlng_jisinm[2],map_sisen,2); // jisin polygon var polArray = []; polArray[0] = new google.maps.LatLng(latlng_jisinm[1],latlng_jisinm[2]); polArray[1] = new google.maps.LatLng(latlng_jisinp[1],latlng_jisinp[2]); poly_jisin = new google.maps.Polygon({ paths: polArray, strokeColor: "#ff0000", strokeOpacity: 0.5, strokeWeight: 20, fillColor: "#ff0000", fillOpacity: 0.5, map: map_sisen }); } // marker 作成関数 function create_Marker(name,lat,lng,map,flag) { //marker_sisens[i] = new google.maps.Marker({ var latlng = new google.maps.LatLng(lat, lng); var pixelOffset = new google.maps.Size(0, -40); var marker = new google.maps.Marker({ position: latlng, icon: url_icon[flag], zIndex: 4, map: map }); // sisen ss 切替 switch(flag) { case 0: marker_sisens.push(marker); break; case 1: marker_ss.push(marker); break; case 2: marker_jisin = marker; break; } // マーカーにマウスを乗せたときのイベント marker.addListener('mouseover', function() { // infoの位置 hoverinfo = new google.maps.InfoWindow({ map: map, content: name, noSuppress: true, pixelOffset: pixelOffset }); hoverinfo.setPosition( latlng ); // マーカーからマウスを降ろしたときのイベント marker.addListener('mouseout', function() { if(hoverinfo) hoverinfo.close(); }); }); } // ground overlay kyusyu 九州地図描画 // set overlay position function make_gover_kyusyu() { var ne = new google.maps.LatLng(latlng_govers[0][0], latlng_govers[0][1] - 26); var sw = new google.maps.LatLng(latlng_govers[1][0], latlng_govers[1][1] - 26); var imageBounds = new google.maps.LatLngBounds(sw,ne); // Go overlay map_gover_kyusyu = new google.maps.GroundOverlay('https://cdn-ak.f.st-hatena.com/images/fotolife/l/luke24e-hbid/20191123/20191123141007.gif',imageBounds,{opacity: 0.25 },{xIndex: 0 }); map_gover_kyusyu.setMap(map_sisen); } // // polygon 扇状地範囲 function make_polygon(){ // upper polygon var polArray = []; for (i = 0; i < latlng_polyuppers.length; i++) { polArray[i] = new google.maps.LatLng(latlng_polyuppers[i][0], latlng_polyuppers[i][1]); } poly_upper = new google.maps.Polygon({ paths: polArray, strokeColor: "#65f98a", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#65f98a", fillOpacity: 0.25, map: map_sisen }); // lower polygon var polArray = []; for (i = 0; i < latlng_polylowers.length; i++) { polArray[i] = new google.maps.LatLng(latlng_polylowers[i][0], latlng_polylowers[i][1]); } poly_lower = new google.maps.Polygon({ paths: polArray, strokeColor: "#f9d865", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#f9d865", fillOpacity: 0.25, map: map_sisen }); } // // // google maps call back function function initMap() { // LatLng for center of map latlng_center_sisen = new google.maps.LatLng(latlng_centers[1], latlng_centers[2]); latlng_center_ss = new google.maps.LatLng( (latlng_ss[0][1] + latlng_ss[1][1]) / 2, (latlng_ss[0][2] + latlng_ss[1][2]) / 2); // set map options mapOptions_base = { zoom: 8, center: latlng_center_sisen, scaleControl: true , } mapOptions_terr = { mapTypeId: 'terrain', styles: [ { // water blue color featureType: "water", elementType: "all", stylers: [ {visibility: "on"}, {color: "#0786fa" } ] },{ // road invisible featureType: "road", elementType: "all", stylers: [ {visibility: "off" } ] },{ // small administrative invisible featureType: "administrative.province", elementType: "all", stylers: [ {visibility: "off" } ] },{ featureType: "administrative.neighborhood", elementType: "all", stylers: [ {visibility: "off" } ] } ] } mapOptions_road = { mapTypeId: 'roadmap', styles: [ { // road invisible featureType: "road", elementType: "all", stylers: [ {visibility: "on" } ] },{ // small administrative invisible featureType: "administrative.province", elementType: "all", stylers: [ {visibility: "on" } ] },{ featureType: "administrative.neighborhood", elementType: "all", stylers: [ {visibility: "on" } ] } ] } // make map map_sisen = new google.maps.Map(document.getElementById('map_sisen'),mapOptions_base); map_sisen.setOptions(mapOptions_terr); // draw marker etc. make_gover_kyusyu(); make_marker_center(); make_marker_sisen(); make_polygon(); } // // check box call back // kyusyu ON/OFF function myfunc0() { var check = document.getElementById("map_sisen_ch0").checked; if (check == true) { make_gover_kyusyu(); } else { map_gover_kyusyu.setMap(null); } } // 扇状地 ON/OFF function myfunc1() { var check = document.getElementById("map_sisen_ch1").checked; if (check == true) { make_polygon(); } else { poly_upper.setMap(null); poly_lower.setMap(null); } } // ss ON/OFF function myfunc2() { var check = document.getElementById("map_sisen_ch2").checked; if (check == true) { make_marker_ss(); map_sisen.setOptions({center: latlng_center_ss}); map_sisen.setZoom(6); } else { for(var i = 0; i < marker_ss.length ; i ++) { marker_ss[i].setMap(null); map_sisen.setOptions({center: latlng_center_sisen}); map_sisen.setZoom(8); } } } // 地震 ON/OFF function myfunc3() { var check = document.getElementById("map_sisen_ch3").checked; if (check == true) { make_marker_jisin(); } else { marker_jisin.setMap(null); poly_jisin.setMap(null); } } // 地勢図 ON/OFF function myfunc4() { var check = document.getElementById("map_sisen_ch4").checked; if (check == true) { map_sisen.setOptions(mapOptions_terr); } else { map_sisen.setOptions(mapOptions_road); } } // ]]></script> <script src="https://maps.googleapis.com/maps/api/js?key=API_key&callback=initMap" async="" defer="defer"></script>
続く
