Uncaught TypeError: google.maps.StamenMapType is not a function

Question

I have not seen this question asked about Stamen tiles anywhere. I am trying to load two maps onto one page, one using Stamen tiles and another using "regular" Google Maps tiles. I've used Stamen in the past and had no issues but here I am not sure what's going on.

The console gives me the error Uncaught TypeError: google.maps.StamenMapType is not a function. I would expect it to work because I have the following code working elsewhere:

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

Why would google.maps.StamenMapType be recognized elsewhere but not here?

What am I doing wrong?

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>

score 2 · Accepted Answer · answered Dec 04 '15 at 02:14

The Stamen library depends on the Google Maps Javascript API v3, you have to include it after that.

Change:

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

Working code snippet:

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>

Uncaught TypeError: google.maps.StamenMapType is not a function

1 Answers1