javascript - Uncaught TypeError : google. maps.StamenMapType 不是函数

Question

我还没有在任何地方看到这个关于 Stamen 瓷砖的问题。我正在尝试将两张 map 加载到一页上，一张使用 Stamen 图 block ，另一张使用“常规”Google map 图 block 。我过去使用过 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 库依赖于 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>