ImageMapType issue?

477 views
Skip to first unread message

Map Guy

unread,
Nov 9, 2011, 1:20:27 AM11/9/11
to google-map...@googlegroups.com
Starting with this example:
 
 
Changing:
 
var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
 
To
 
var jayzMapType = new google.maps.ImageMapType(styledMapOptions);
 
Where: (getTileUrl is the addition)
 
  var styledMapOptions = {
 getTileUrl: function(coord, zoom)
   {
      return "http://foo.com/foo.png";
   }, 
    name: "Hip-Hop"
  };
 
 
Results in (IE):
 
Message: Expected value implementing google.maps.MapType
Line: 1
Char: 28
Code: 0
URI: http://maps.gstatic.com/intl/en_us/mapfiles/api-3/7/0/main.js
Is there something basic I'm missing here or is this a bug?
 
Thanks

Martin™

unread,
Nov 9, 2011, 2:36:42 AM11/9/11
to Google Maps JavaScript API v3
Hi.

http://code.google.com/apis/maps/documentation/javascript/maptypes.html#ImageMapTypes

Looks like you've not defined a (required) 'tileSize' property in your
options.

Martin.


On Nov 9, 6:20 am, Map Guy <rclair...@gmail.com> wrote:
> Starting with this example:
>
> http://code.google.com/apis/maps/documentation/javascript/examples/ma...

Map Guy

unread,
Nov 9, 2011, 2:47:04 AM11/9/11
to Google Maps JavaScript API v3
Thank you for your reply. Good catch.

I added "tileSize: new google.maps.Size(256, 256),"

But I still seem to be running into the same issue. Any ideas?

Complete text:

<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Styled MapTypes</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/
examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?
sensor=false"></script>
<script>

var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

var MY_MAPTYPE_ID = 'hiphop';

function initialize() {

var stylez = [
{
featureType: "road",
elementType: "geometry",
stylers: [
{ hue: -45 },
{ saturation: 100 }
]
},
{
featureType: "landscape",
elementType: "geometry",
stylers: [
{ hue: "#000000" },
{ saturation: 75 },
{ lightness: -100}
]
}
];

var mapOptions = {
zoom: 12,
center: brooklyn,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};

map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);

var styledMapOptions = {
getTileUrl: function(coord, zoom)
{
return "http://foo.com/foo.png";
},
tileSize: new google.maps.Size(256, 256),
name: "Hip-Hop"
};

var jayzMapType = new google.maps.ImageMapType(styledMapOptions);

map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 640px; height: 480px;"></div>
</body>
</html>

On Nov 8, 11:36 pm, Martin™ <warwo...@gmail.com> wrote:
> Hi.
>
> http://code.google.com/apis/maps/documentation/javascript/maptypes.ht...
> > Thanks- Hide quoted text -
>
> - Show quoted text -

Martin™

unread,
Nov 9, 2011, 3:33:21 AM11/9/11
to Google Maps JavaScript API v3
Can you post a link to an online version of your code - there's no way
to debug a code dump.

Martin.

Pil

unread,
Nov 9, 2011, 4:06:43 AM11/9/11
to Google Maps JavaScript API v3
Everyone who is posting code dumps - let's say more than 10 lines (100
characters per line maximum) - should have to pay $100 to the group's
kitty.

This kitty would contain not only peanuts.
;-)

Map Guy

unread,
Nov 9, 2011, 9:19:32 PM11/9/11
to google-map...@googlegroups.com
Apologies, I thought it would be easier to make changes if I supplied the file in email.
 
Here it is online:
 
 
If there is a beer fund, I'll happily contribute :)

Martin™

unread,
Nov 9, 2011, 9:54:58 PM11/9/11
to Google Maps JavaScript API v3
Hi again.

Look at the documentation for ImageMapType:

http://code.google.com/apis/maps/documentation/javascript/maptypes.html#ImageMapTypes

See that you create your ImageMapType and then insert it into the
Map's overlayMapTypes array.

That's different to creating a StyledMapType.

If you want an ImageMapType then why not just start with the demo code
i linked to above?

Note that if you click the View example link for that demo code it
redirects to:

http://code.google.com/apis/maps/documentation/javascript/examples/maptype-image.html

That's not the demo page code!

The link you posted has an error too.
It's encoding is UTF-16LE and i think has been saved with a Unicode
signature (BOM) which seems to prevent the API from loading.
Might just be a problem with dropbox and not a problem with your
original code.

Martin.

Map Guy

unread,
Nov 10, 2011, 1:19:29 AM11/10/11
to Google Maps JavaScript API v3
Good call about the BOM. Fixing that seems to have got me past some
issues...

I think I may be confusing Layers with MapTypes?

The reason I started with the StyledMapExample is the example had the
appearance of something being an overlay on Roadmap.

Now, when I made changes to Moon in order to make it appear like a 0.5
opacity overlay of Roadmap, I get this:

http://dl.dropbox.com/u/48944369/moon.html

Clicking Map/Moon seems to sort of do what I expect, (i.e. moon tiles
overlaid on Google's render of the earth) but this appears to be due
to a bug, not a feature.

Thank you

On Nov 9, 6:54 pm, Martin™ <warwo...@gmail.com> wrote:
> Hi again.
>
> Look at the documentation for ImageMapType:
>
> http://code.google.com/apis/maps/documentation/javascript/maptypes.ht...
>
> See that you create your ImageMapType and then insert it into the
> Map's overlayMapTypes array.
>
> That's different to creating a StyledMapType.
>
> If you want an ImageMapType then why not just start with the demo code
> i linked to above?
>
> Note that if you click the View example link for that demo code it
> redirects to:
>
> http://code.google.com/apis/maps/documentation/javascript/examples/ma...
>
> That's not the demo page code!
>
> The link you posted has an error too.
> It's encoding is UTF-16LE and i think has been saved with a Unicode
> signature (BOM) which seems to prevent the API from loading.
> Might just be a problem with dropbox and not a problem with your
> original code.
>
> Martin.
>
> On Nov 10, 2:19 am, Map Guy <rclair...@gmail.com> wrote:
>
>
>
> > Apologies, I thought it would be easier to make changes if I supplied the
> > file in email.
>
> > Here it is online:
>
> >http://dl.dropbox.com/u/48944369/goog.html
>
> > If there is a beer fund, I'll happily contribute :)- Hide quoted text -

Martin™

unread,
Nov 10, 2011, 2:20:21 AM11/10/11
to Google Maps JavaScript API v3
Hi.

Look at the documentation again in more detail.

http://code.google.com/apis/maps/documentation/javascript/maptypes.html#MapTypeInterface

Base Map Types
Map types which you construct in this manner may either stand alone or
be combined with other map types as overlays. Standalone map types are
known as base map types.

Overlay Map Types
Some map types are designed to work on top of existing map types. Such
map types may have transparent layers indicating points of interest,
or showing additional data to the user.

Image Map Types
Note that this map type is inserted into the map's overlayMapTypes
array.

So you can create a standalone new map type or a map type that
displays on top of other standalone map types.

It sounds to me as if you want to create an OverlayMapType?

Martin.
Reply all
Reply to author
Forward
0 new messages