Google지도의 기본보기를 변경할 수 없습니까?

Question

대화식지도를 작성하는 중이고 위성과는 달리 도로보기로지도를로드하고 싶습니다 (지금 당장).

var options 섹션 아래에 mapTypeId : 'roadmap'을 추가했지만 작동하지 않는 것 같습니다. 다른 사람이 비슷한 문제를 겪고 있습니까? the documentation 당

google.charts.load('current', { 
    'packages': ['map'], 
    'mapsApiKey': 'AIzaSyC0cSTnym-r836gkhPRgER9MWycFRtDMrI' 
    }); 
    google.charts.setOnLoadCallback(drawMap); 

    function drawMap() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Address'); 
    data.addColumn('string', 'Location'); 
    data.addColumn('string', 'Marker') 

     data.addRows([ 
     ['11 East 29th Street, New York, NY, United States', 'Home', 
     'blue' ], 
     ['33 St, New York NY, 10016 United States', '6 train station', 
     'pink'], 
     ['Union Square, New York, NY 10003', 'Union Square', 'pink' 
     ], 
    ]); 
    var url = 'https://icons.iconarchive.com/icons/icons-land/vista- 
    map-markers/48/'; 

    var options = { 
    zoomLevel: 10, 
    showTooltip: true, 
    showInfoWindow: true, 
    useMapTypeControl: true, 
    icons: { 
     blue: { 
     normal: url + 'Map-Marker-Ball-Azure-icon.png', 
     selected: url + 'Map-Marker-Ball-Right-Azure-icon.png' 
     }, 
     green: { 
     normal: url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png', 
     selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse- 
    icon.png' 
     }, 
     pink: { 
     normal: url + 'Map-Marker-Flag-3-Right-Pink-icon.png', 
     selected: url + 'Map-Marker-Flag-2-Right-Pink-icon.png' 
     } 
     } 
    }; 
    var map = new 
    google.visualization.Map(document.getElementById('map_div')); 

    map.draw(data, options); 
} 

Answer 1

:지도의 유형을 보여

지도 타입. 가능한 값은 'normal', 'terrain', 'satellite', 'hybrid'또는 사용자 정의지도 유형 (있는 경우)의 ID입니다.

유형 : 문자열
기본 : '하이브리드'

그래서 이것은 "로드맵"을 표시합니다

mapType: "normal", 

proof of concept fiddle

코드 :

google.charts.load('current', { 
 
    'packages': ['map'], 
 
    'mapsApiKey': 'AIzaSyC0cSTnym-r836gkhPRgER9MWycFRtDMrI' 
 
}); 
 
google.charts.setOnLoadCallback(drawMap); 
 

 
function drawMap() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Address'); 
 
    data.addColumn('string', 'Location'); 
 
    data.addColumn('string', 'Marker') 
 

 
    data.addRows([ 
 
    ['11 East 29th Street, New York, NY, United States', 'Home', 
 
     'blue' 
 
    ], 
 
    ['33 St, New York NY, 10016 United States', '6 train station', 
 
     'pink' 
 
    ], 
 
    ['Union Square, New York, NY 10003', 'Union Square', 'pink'], 
 
    ]); 
 
    var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/'; 
 

 
    var options = { 
 
    zoomLevel: 10, 
 
    showTooltip: true, 
 
    showInfoWindow: true, 
 
    useMapTypeControl: true, 
 
    mapType: "normal", 
 
    icons: { 
 
     blue: { 
 
     normal: url + 'Map-Marker-Ball-Azure-icon.png', 
 
     selected: url + 'Map-Marker-Ball-Right-Azure-icon.png' 
 
     }, 
 
     green: { 
 
     normal: url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png', 
 
     selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png ' 
 
     }, 
 
     pink: { 
 
     normal: url + 'Map-Marker-Flag-3-Right-Pink-icon.png', 
 
     selected: url + 'Map-Marker-Flag-2-Right-Pink-icon.png' 
 
     } 
 
    } 
 
    }; 
 
    var map = new 
 
    google.visualization.Map(document.getElementById('map_div')); 
 

 
    map.draw(data, options); 
 
}

html, 
 
body, 
 
#map_div { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="map_div"></div>