未捕获的TypeError：google.maps.StamenMapType不是函数

Question

我还没有看到任何关于雄蕊瓷砖的问题。我试图将两个地图加载到一个页面上，一个使用Stamen tile，另一个使用＆＃34; regular＆＃34; Google地图图块。我过去曾经使用过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会在别处被识别，而不是在这里？

我做错了什么？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

Stamen库依赖于Google Maps Javascript API v3，您必须在此之后包含它。

变化：

<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>

要：

<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>