Google Maps API - Hinzufügen eines Fusion Table Layers zu einem formatierten Kartenlayer

Question

Ich bin sehr neu im Coding, ich habe noch nie wirklich damit gearbeitet und wurde damit beauftragt, eine benutzerdefinierte Map zu erstellen, auf der ich auch zeigen kann eine Reihe von Markern. Ich war erfolgreich beim Erstellen einer Karte, die die Markierungen und eine andere Karte mit dem benutzerdefinierten Stil zeigen. Ich kann jedoch nicht herausfinden, wie diese beiden zusammen zu kombinieren sind.

Momentan habe ich diese, die die gestylte Map aber nicht die Marker anzeigt und ich bin völlig ahnungslos wie es weiter geht von hier.

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' 
    } 
    }); 

Alle Vorschläge würden sehr geschätzt werden, da ich sehr sehr neu dazu bin.

Answer 1

Ihre Layer-Instanz sollte innerhalb der Funktion initMap liegen, und Sie müssen die Map für diesen Layer festlegen.

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

layer.setMap(map); 

Siehe Beispiel hier zu arbeiten: http://jsbin.com/yajuxoj/edit?html,css,js,output

Hier ist der Code der Beispielanwendung ist, können Sie auch, indem Sie den Code-Schnipsel der Probe hier sehen und überprüfen:

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>