Google Maps Javascript API v3 に緯度と経度の線を引いて本の地図っぽくします。

緯度・経度ともに1度単位で線が描かれます。10度単位で青線、赤道と経度の0度・-180度(+180度)は赤線になります。

<style>
#mapdiv1 {width:100%;height:400px;}
</style>
<div id="mapdiv1"></div>
<script>
  var map1;
  function initMap1() {
    map1 = new google.maps.Map(document.getElementById('mapdiv1'), {
      center: {lat: 35.6895326, lng: 139.6908937},
      zoom: 4
    });
    //経度線 -85度～+85度
    var lat_line1;
    for(var i=-85; i<=85; i++){
      //線の色と濃度(不透明度)を決めます
      var color="#aaaaaa";
      var opa=0.3;
      if (i % 5 ==0){
        if (i % 10 ==0){
          // 0 10 20
          color="#0000ff";
          opa=0.6
        }else{
          // 5 15 25
          color="#aaaaaa";
          opa=0.6
        }
      }
      if (i==0){
          color="#ff0000";
          opa=0.8
      }
      //経度線を引きます
      var line=[{lat:i,lng:-180},{lat:i,lng:0},{lat:i,lng:179.999999}];
      lat_line1 = new google.maps.Polyline({
        path: line,
        strokeColor: color,
        strokeOpacity: opa,
        strokeWeight: 1
      });
      lat_line1.setMap(map1);
    }
 
    //緯度線を引きます
    //(※-180と180は本来同じだけど片方だけだと線が細くなる)
    for(var i=-180; i<=180; i++){
      //線の色と濃度(不透明度)を決めます
      var color="#aaaaaa";
      var opa=0.3;
      if (i % 5 ==0){
        if (i % 10 ==0){
          // 0 10 20
          color="#0000ff";
          opa=0.6
        }else{
          // 5 15 25
          color="#aaaaaa";
          opa=0.6
        }
      }
      if (i%180==0){
          color="#ff0000";
          opa=0.8
      }
      //緯度線を引きます
      var line=[{lat:85,lng:i},{lat:0,lng:i},{lat:-85,lng:i}];
      lat_line1 = new google.maps.Polyline({
        path: line,
        strokeColor: color,
        strokeOpacity: opa,
        strokeWeight: 1
      });
      lat_line1.setMap(map1);
    }
  }
 
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap1" async defer></script>

ここは旧トップページ＞日曜プログラミング