La mappa di base dell'API di Google Maps può essere utilizzata come sovrapposizione sopra un livello mappa personalizzato?

Question

È possibile utilizzare i dati della mappa di base dell'API di Google Maps come una sovrapposizione posizionata su sopra un livello mappa personalizzato?

Vorrei creare una mappa che utilizza l'acqua di base di Google e terra/terreno come livello inferiore, quindi posizionare un livello dati personalizzato sopra (regioni poligonali rosse che rappresentano i miei dati), quindi posizionare infine la strada di Google Map/boundary/city labels in cima a tutto.

è possibile? Ho provato a spostare un layer di Google Maps (con solo strade/limiti/città attivate) sull'array overlayMapTypes, ma sembra forzare tutti i livelli di Google Maps su tutto e i miei dati di livello personalizzati (il secondo livello) è non più visibile.

Answer 1

Ecco un esempio con uno strato di piastrelle personalizzate come strato intermedio:

<script type="text/javascript"> 
function initMap() { 
    // Map with everything off but boundaries 
    var myOptions = { 
     zoom: 2, 
     center: new google.maps.LatLng(0, 0), 
     styles: [ 
      { 
       featureType: 'poi', 
       stylers: [ 
        { visibility: 'off' } 
       ] 
      }, 
      { 
       featureType: 'road', 
       stylers: [ 
        { visibility: 'off' } 
       ] 
      }, 
      { 
       featureType: 'transit', 
       stylers: [ 
        { visibility: 'off' } 
       ] 
      }, 
      { 
       featureType: 'landscape', 
       stylers: [ 
        { visibility: 'off' } 
       ] 
      }, 
      { 
       elementType: 'labels', 
       stylers: [ 
        { visibility: 'off' } 
       ] 
      } 
     ] 
    }; 

    var map = new google.maps.Map(document.getElementById("map"), myOptions); 

    // Middle layer 
    var tileLayer = new google.maps.ImageMapType({ 
     getTileUrl: "tiles URL here", 
     tileSize: new google.maps.Size(256, 256), 
     isPng: true 
    }); 

    map.overlayMapTypes.push(tileLayer); 

    // Top layer with everything off but roads 
    var roadsLayer = [ 
     { 
      featureType: 'all', 
      stylers: [ 
       { visibility: 'off' } 
      ] 
     }, 
     { 
      featureType: 'road', 
      stylers: [ 
       { visibility: 'on' } 
      ] 
     } 
    ]; 

    var roadsType = new google.maps.StyledMapType(roadsLayer, { name: 'roads' }); 
    map.overlayMapTypes.push(roadsType); 
}