Uncaught TypeError: google.maps.StamenMapType не является функцией

Question

Я не видел, чтобы этот вопрос спрашивал о плитах Столдена в любом месте. Я пытаюсь загрузить две карты на одну страницу, одну с использованием Stamen tiles, а другую - с помощью «обычных» карт Google Maps. Я использовал Stamen в прошлом и не имел проблем, но здесь я не уверен, что происходит.

Консоль дает мне ошибку Uncaught TypeError: google.maps.StamenMapType is not a function. Я бы ожидать, что это работает, потому что у меня есть следующий код работает в другом месте:

var layer = "toner-lite"; 
var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(39.290385, -76.612189), 
    zoom: 10, 
    mapTypeId: layer, 
    mapTypeControlOptions: { 
     mapTypeIds: [layer, google.maps.MapTypeId.HYBRID] 
    } 
}); 

Почему бы google.maps.StamenMapType быть признан в другом месте, но не здесь?

Что я делаю неправильно?

var map1; 
 
var map2; 
 
var mapProp; 
 

 

 
function initMap() { 
 
    var layer = "toner"; 
 
    map = new google.maps.Map(document.getElementById('mapOne'), { 
 
    center: new google.maps.LatLng(37.7, -122.4), 
 
    zoom: 12, 
 
    mapTypeId: layer, 
 
    mapTypeControlOptions: { 
 
     mapTypeIds: [layer] 
 
    } 
 
    }); 
 
    map.mapTypes.set(layer, new google.maps.StamenMapType(layer)); 
 
}; 
 

 
var newMap; 
 
var newMapProp; 
 

 
function newInitMap() { 
 
    newMapProp = { 
 
    center: new google.maps.LatLng(37, -77), 
 
    zoom: 8, 
 
    mapTypeId: google.maps.MapTypeId.ROAD 
 
    }; 
 
    newMap = new google.maps.Map(document.getElementById('mapTwo'), newMapProp); 
 
} 
 

 
$(document).ready(function() { 
 
    newInitMap(); 
 
    initMap(); 
 
})

#content { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
.map { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
} 
 
#right { 
 
    float: right; 
 
} 
 
#left { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkVd6hg93FK8s6RAS0DjEgKdR_gaR2UXs"></script> 
 

 
<div id="content"> 
 
    <div id="left"> 
 
    <div id="mapOne" class="map"></div> 
 
    </div> 
 
    <div id="right"> 
 
    <div id="mapTwo" class="map"></div> 
 
    </div> 
 
</div>

Answer 1

Библиотека Stamen зависит от API v3 Google Maps Javascript, вы должны включить его после этого.

Изменение:

<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkVd6hg93FK8s6RAS0DjEgKdR_gaR2UXs"></script> 

To:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkVd6hg93FK8s6RAS0DjEgKdR_gaR2UXs"></script> 
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script> 

Рабочий фрагмент кода:

var map1; 
 
var map2; 
 
var mapProp; 
 

 

 
function initMap() { 
 
    var layer = "toner"; 
 
    map = new google.maps.Map(document.getElementById('mapOne'), { 
 
    center: new google.maps.LatLng(37.7, -122.4), 
 
    zoom: 12, 
 
    mapTypeId: layer, 
 
    mapTypeControlOptions: { 
 
     mapTypeIds: [layer] 
 
    } 
 
    }); 
 
    map.mapTypes.set(layer, new google.maps.StamenMapType(layer)); 
 
}; 
 

 
var newMap; 
 
var newMapProp; 
 

 
function newInitMap() { 
 
    newMapProp = { 
 
    center: new google.maps.LatLng(37, -77), 
 
    zoom: 8, 
 
    mapTypeId: google.maps.MapTypeId.ROAD 
 
    }; 
 
    newMap = new google.maps.Map(document.getElementById('mapTwo'), newMapProp); 
 
} 
 

 
$(document).ready(function() { 
 
    newInitMap(); 
 
    initMap(); 
 
})

#content { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
.map { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
} 
 
#right { 
 
    float: right; 
 
} 
 
#left { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script> 
 

 
<div id="content"> 
 
    <div id="left"> 
 
    <div id="mapOne" class="map"></div> 
 
    </div> 
 
    <div id="right"> 
 
    <div id="mapTwo" class="map"></div> 
 
    </div> 
 
</div>