Google지도 API - 스타일이 지정된지도 레이어에 융합 표 레이어 추가

Question

코딩하기가 너무 쉽습니다. 이전에 전혀 사용하지 않았으며 내가 보여줄 수있는 맞춤지도를 만들어야했습니다. 마커의 숫자. 나는 마커를 보여주는 맵과 커스텀 스타일을 가진 또 다른 맵을 만드는 데있어 성공적이었다. 그러나, 나는이 두 가지를 어떻게 결합시키는지를 알 수 없다.

현재 나는 스타일있는 맵을 표시하지만 마커는 표시하지 않으며 여기에서 앞으로 이동하는 방법에 대해 완전히 우둔합니다.

function initMap() { 

var styledMapType = new google.maps.StyledMapType(
    [ 
    {elementType: 'geometry', stylers: [{color: '#C6BBB2'}]}, 
    {elementType: 'labels.text.fill', stylers: [{color: '#523735'}]}, 
    {elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]}, 
    { 
     featureType: 'administrative', 
     elementType: 'geometry.stroke', 
     stylers: [{color: '#C6BBB2'}] 
    }, 
    { 
     featureType: 'administrative.land_parcel', 
     elementType: 'geometry.stroke', 
     stylers: [{color: '#dcd2be'}] 
    }, 
    { 
     featureType: 'administrative.land_parcel', 
     elementType: 'labels.text.fill', 
     stylers: [{color: '#ae9e90'}] 
    }, 
    { 
     featureType: 'landscape.natural', 
     elementType: 'geometry', 
     stylers: [{color: '#C1B4AB'}] 
    }, 
    { 
     featureType: 'poi', 
     elementType: 'geometry', 
     stylers: [{color: '#C6BBB2'}] 
    }, 
    { 
     featureType: 'poi', 
     elementType: 'labels.text.fill', 
     stylers: [{color: '#93817c'}] 
    }, 
    { 
     featureType: 'poi.park', 
     elementType: 'geometry.fill', 
     stylers: [{color: '#D3D3D3'}] 
    }, 
    { 
     featureType: 'poi.park', 
     elementType: 'labels.text.fill', 
     stylers: [{color: '#788F88'}] 
    }, 
    { 
     featureType: 'road', 
     elementType: 'geometry', 
     stylers: [{color: '#FFB9C5'}] 
    }, 
    { 
     featureType: 'road.arterial', 
     elementType: 'geometry', 
     stylers: [{color: '#FFB9C5'}] 
    }, 
    { 
     featureType: 'road.highway', 
     elementType: 'geometry', 
     stylers: [{color: '#FFB9C5'}] 
    }, 
    { 
     featureType: 'road.highway', 
     elementType: 'geometry.stroke', 
     stylers: [{color: '#FF6D82'}] 
    }, 
    { 
     featureType: 'road.highway.controlled_access', 
     elementType: 'geometry', 
     stylers: [{color: '#FFB9C5'}] 
    }, 
    { 
     featureType: 'road.highway.controlled_access', 
     elementType: 'geometry.stroke', 
     stylers: [{color: '#FF906D'}] 
    }, 
    { 
     featureType: 'road.local', 
     elementType: 'labels.text.fill', 
     stylers: [{color: '#806b63'}] 
    }, 
    { 
     featureType: 'transit.line', 
     elementType: 'geometry', 
     stylers: [{color: '#dfd2ae'}] 
    }, 
    { 
     featureType: 'transit.line', 
     elementType: 'labels.text.fill', 
     stylers: [{color: '#8f7d77'}] 
    }, 
    { 
     featureType: 'transit.line', 
     elementType: 'labels.text.stroke', 
     stylers: [{color: '#ebe3cd'}] 
    }, 
    { 
     featureType: 'transit.station', 
     elementType: 'geometry', 
     stylers: [{color: '#C6BBB2'}] 
    }, 
    { 
     featureType: 'water', 
     elementType: 'geometry.fill', 
     stylers: [{color: '#BAC6C2'}] 
    }, 
    { 
     featureType: 'water', 
     elementType: 'labels.text.fill', 
     stylers: [{color: '#BAC6C2'}] 
    } 
    ], 
    {name: 'Styled Map'}); 

var map = new google.maps.Map(document.getElementById('map'), { 
center: {lat: 59.329314, lng: 18.068579}, 
zoom: 10, 
mapTypeControlOptions: { 
    mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 
      'styled_map'] 
} 
}); 
map.mapTypes.set('styled_map', styledMapType); 
map.setMapTypeId('styled_map'); 
} 

var layer = new google.maps.FusionTablesLayer({ 
query: { 
    select: 'X', 
    from: '1GofM5ligrJNdXrv3wtJ8FMVeHIS5uGMJ85-SzoCF' 
    } 
    }); 

모든 제안은 매우 신나는 내용입니다.

Answer 1

레이어 인스턴스가 initMap 함수 내에 있어야하며 해당 레이어의지도를 설정해야합니다.

var layer = new google.maps.FusionTablesLayer({ 
    query: { 
     select: 'X', 
     from: '1GofM5ligrJNdXrv3wtJ8FMVeHIS5uGMJ85-SzoCF' 
    } 
}); 

layer.setMap(map); 

여기에 예를 들어 작업을 참조하십시오 :

function initMap() { 
 

 
    var styledMapType = new google.maps.StyledMapType(
 
     [{ 
 
       elementType: 'geometry', 
 
       stylers: [{ 
 
        color: '#C6BBB2' 
 
       }] 
 
      }, 
 
      { 
 
       elementType: 'labels.text.fill', 
 
       stylers: [{ 
 
        color: '#523735' 
 
       }] 
 
      }, 
 
      { 
 
       elementType: 'labels.text.stroke', 
 
       stylers: [{ 
 
        color: '#f5f1e6' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'administrative', 
 
       elementType: 'geometry.stroke', 
 
       stylers: [{ 
 
        color: '#C6BBB2' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'administrative.land_parcel', 
 
       elementType: 'geometry.stroke', 
 
       stylers: [{ 
 
        color: '#dcd2be' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'administrative.land_parcel', 
 
       elementType: 'labels.text.fill', 
 
       stylers: [{ 
 
        color: '#ae9e90' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'landscape.natural', 
 
       elementType: 'geometry', 
 
       stylers: [{ 
 
        color: '#C1B4AB' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'poi', 
 
       elementType: 'geometry', 
 
       stylers: [{ 
 
        color: '#C6BBB2' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'poi', 
 
       elementType: 'labels.text.fill', 
 
       stylers: [{ 
 
        color: '#93817c' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'poi.park', 
 
       elementType: 'geometry.fill', 
 
       stylers: [{ 
 
        color: '#D3D3D3' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'poi.park', 
 
       elementType: 'labels.text.fill', 
 
       stylers: [{ 
 
        color: '#788F88' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'road', 
 
       elementType: 'geometry', 
 
       stylers: [{ 
 
        color: '#FFB9C5' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'road.arterial', 
 
       elementType: 'geometry', 
 
       stylers: [{ 
 
        color: '#FFB9C5' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'road.highway', 
 
       elementType: 'geometry', 
 
       stylers: [{ 
 
        color: '#FFB9C5' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'road.highway', 
 
       elementType: 'geometry.stroke', 
 
       stylers: [{ 
 
        color: '#FF6D82' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'road.highway.controlled_access', 
 
       elementType: 'geometry', 
 
       stylers: [{ 
 
        color: '#FFB9C5' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'road.highway.controlled_access', 
 
       elementType: 'geometry.stroke', 
 
       stylers: [{ 
 
        color: '#FF906D' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'road.local', 
 
       elementType: 'labels.text.fill', 
 
       stylers: [{ 
 
        color: '#806b63' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'transit.line', 
 
       elementType: 'geometry', 
 
       stylers: [{ 
 
        color: '#dfd2ae' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'transit.line', 
 
       elementType: 'labels.text.fill', 
 
       stylers: [{ 
 
        color: '#8f7d77' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'transit.line', 
 
       elementType: 'labels.text.stroke', 
 
       stylers: [{ 
 
        color: '#ebe3cd' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'transit.station', 
 
       elementType: 'geometry', 
 
       stylers: [{ 
 
        color: '#C6BBB2' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'water', 
 
       elementType: 'geometry.fill', 
 
       stylers: [{ 
 
        color: '#BAC6C2' 
 
       }] 
 
      }, 
 
      { 
 
       featureType: 'water', 
 
       elementType: 'labels.text.fill', 
 
       stylers: [{ 
 
        color: '#BAC6C2' 
 
       }] 
 
      } 
 
     ], { 
 
      name: 'Styled Map' 
 
     }); 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     center: { 
 
      lat: 59.329314, 
 
      lng: 18.068579 
 
     }, 
 
     zoom: 10, 
 
     mapTypeControlOptions: { 
 
      mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 
 
       'styled_map' 
 
      ] 
 
     } 
 
    }); 
 

 
    map.mapTypes.set('styled_map', styledMapType); 
 
    map.setMapTypeId('styled_map'); 
 
    
 
    var layer = new google.maps.FusionTablesLayer({ 
 
     query: { 
 
      select: 'X', 
 
      from: '1GofM5ligrJNdXrv3wtJ8FMVeHIS5uGMJ85-SzoCF' 
 
     } 
 
    }); 
 
    layer.setMap(map); 
 
}

#map { 
 
    height: 500px; 
 
    width: 500px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Sample</title> 
 
</head> 
 

 
<body> 
 
    <div id="map"></div> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap" async defer></script> 
 
</body> 
 

 
</html>

: 여기

http://jsbin.com/yajuxoj/edit?html,css,js,output, 당신은 또한 확인하고 코드를 실행하여 샘플을 여기에서 확인하실 수 있습니다 샘플 응용 프로그램의 코드