1

おしべのタイルについてこの質問が出されたのを見たことがありません。1 つのページに 2 つのマップを読み込もうとしています。1 つは Stamen タイルを使用し、もう 1 つは「通常の」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他の場所では認識されるのに、ここでは認識されないのはなぜですか?

私は何を間違っていますか？

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>

4

1 に答える 1

2

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>

于 2015-12-04T02:14:56.157 に答える