【Google map api】タブで複数の地図を表示した場合

概要

タブを使用したGoogle map apiの地図を表示しようとした場合、タブ毎にDynamic Mapsのライセンスが使用されるので留意します。

内容

以下のソースではタブごとに地図を定義しているため、Dynamic Mapsは2となります。

<style>

.tabs input {
    display: none;
}

.tabs label {
    cursor: pointer;
    padding: 10px;
    background: #ddd;
    display: inline-block;
}

.tabs .content {
    display: none;
    padding: 10px;
    border: 1px solid #ccc;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
    display: block;
}

</style>
<div class="tabs">
    <input type="radio" id="tab1" name="tab" checked>
    <label for="tab1">タブ1</label>
    <input type="radio" id="tab2" name="tab">
    <label for="tab2">タブ2</label>
    
    <div class="content" id="content1">
       <div id="map-01" style="width: 400px; height: 300px;"></div>
    </div>
    <div class="content" id="content2">
       <div id="map-02" style="width: 400px; height: 300px;"></div>
    </div>
</div>




<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
<script>
function initMaps() {
    var mapOptions1 = {
        center: new google.maps.LatLng(35.6895, 139.6917), // 東京
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapOptions2 = {
        center: new google.maps.LatLng(34.6937, 135.5023), // 大阪
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map1 = new google.maps.Map(document.getElementById("map-01"), mapOptions1);
    var map2 = new google.maps.Map(document.getElementById("map-02"), mapOptions2);
}

window.onload = initMaps;
</script>

タブを切り替えても地図は1つにした場合

この場合は、Dynamic Mapsのライセンスは1つです。

<style>

.tabs input {
    display: none;
}

.tabs label {
    cursor: pointer;
    padding: 10px;
    background: #ddd;
    display: inline-block;
}

.tabs .content {
    display: none;
    padding: 10px;
    border: 1px solid #ccc;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
    display: block;
}

</style>
<div class="tabs">
    <input type="radio" id="tab1" name="tab" checked>
    <label for="tab1">タブ1</label>
    <input type="radio" id="tab2" name="tab">
    <label for="tab2">タブ2</label>
    <div class="content" id="content1">
     <p>タブ1</p>  
    </div>
    <div class="content" id="content2">
     <p>タブ2</p>  
    </div>
    <div id="map-01" style="width: 400px; height: 300px;"></div>
</div>




<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxx"></script>
<script>
function initMaps() {
    var mapOptions1 = {
        center: new google.maps.LatLng(35.6895, 139.6917), // 東京
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map1 = new google.maps.Map(document.getElementById("map-01"), mapOptions1);

}

window.onload = initMaps;
</script>