Question

I’m trying to show a custom map using the Google Maps Javascript API. In particular, I’m trying to show it using a couple of jquery scripts to allow rotation of the map. I’m not sure if that part is relevant.

When running the code using standard Google Map data (ie, tiles of Earth), it works fine. So here is my map-creation code:

     // Standard google map
     var map = new google.maps.Map2(document.getElementById('map'));
     map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);

This works fine. However, when I try to use a custom map, feeding it my own tiles (which I have already achieved in another project, without map rotation), I get “undefined is not a function”. Here is the code that has been added to use custom tiles instead of standard Google Maps data:

google.load("maps", "2.x");

var customTypeOptions = {
        getTileUrl: function (coord, zoom) {
            var normalizedCoord = getNormalizedCoord(coord, zoom);
            if (!normalizedCoord) {
                return null;
            }
            var bound = Math.pow(2, zoom);
            return "http://MYTILESURL/" + zoom + "/" + normalizedCoord.x + "/" + (bound - normalizedCoord.y - 1) + ".jpg";
        },
        tileSize: new google.maps.Size(256, 256),
        maxZoom: 3,
        minZoom: 0,
        radius: 1024,
        name: 'custom'
    };

var customMapType = new google.maps.ImageMapType(customTypeOptions);

and then in my initialize() function:

// Custom map
  var myLatlng = new google.maps.LatLng(0, 0);
  var myOptions = {
    center: myLatlng,
    zoom: 0,
    streetViewControl: false,
    mapTypeControlOptions: {
    mapTypeIds: ['custom']
    }
 };

 var map = new google.maps.Map(document.getElementById('map'), myOptions);
 map.mapTypes.set('custom', customMapType);
 map.setMapTypeId('custom');

The error I’m getting is showing “line 46”, which in my code is “tileSize: new google.maps.Size(256, 256),”. I’m not sure, however, if the 46 reported here is the same 46 I’m reading, ie, the 46th line of the file.

Does anyone have any ideas why I’m getting this “undefined is not a function” error?

Answer 1

This is happening because google.maps.Size is being accessed before the GMap library has finished loading. Simply move anything that refers to google.maps inside your initialise function (or use the callback option in your google.load call to do the same thing).