PDA

View Full Version : Google map : Styled Maps



binny123
17 Sep 2010, 12:40 AM
Hi,

I have an application with the google maps. I am trying to add 'Styled Map ' to it . But it displays error "Uncaught TypeError: Cannot call method 'set' of undefined". Something similar to the example: http://code.google.com/apis/maps/documentation/javascript/examples/maptype-styled-simple.html


My code:


var stylez = [
{
featureType: "road",
elementType: "all",
stylers: [
{
visibility: "off"}]}];

var myOptions = {
zoom: 17,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'MY_MAPTYPE_ID']
},
mapTypeId: 'MY_MAPTYPE_ID'
};

var styledMapOptions = {
name: 'MY_MAPTYPE'
};

var newMapType = new google.maps.StyledMapType(stylez, styledMapOptions);


mapdemo = new Ext.Map({
mapOptions: myOptions
});


mapdemo.mapTypes.set("MY_MAPTYPE_ID", newMapType); //error from this line


This works well in normal application. Can Styled Maps be implemented?


Thanks.

evant
19 Sep 2010, 8:37 PM
If you're trying to access the underlying map, you need to use:



mapdemo.map.mapTypes.....

binny123
19 Sep 2010, 8:45 PM
I even tried to execute with 'mapdemo.map.mapTypes.set('MY_MAPTYPE', newMapType);' Then too same error message

Uncaught TypeError: Cannot read property 'mapTypes' of null

evant
19 Sep 2010, 9:11 PM
There's a whole bunch of problems with your code:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

var MY_MAPTYPE_ID = 'hiphop';

var stylez = [{
featureType: "road",
elementType: "geometry",
stylers: [{
hue: "#00ff00"
}, {
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: google.maps.MapTypeId.ROADMAP
};

var mapDemo = new Ext.Map({
fullscreen: true,
mapOptions: mapOptions,
listeners: {
delay: 3000, //wait 3s
maprender: function(){
var jayzMapType = new google.maps.StyledMapType(stylez, {
name: 'Hip-Hop'
});

var map = mapDemo.map;
map.setMapTypeId(MY_MAPTYPE_ID);
map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
}
}
});
}
});

binny123
19 Sep 2010, 9:20 PM
Thanks, It works

But still there is no tab, other than map(google.maps.MapTypeId.ROADMAP) . the Tab (MY_MAPTYPE_ID)set by style is not displayed . When the MAp tab is pressed, the styles disappear.

rkstar
23 Aug 2011, 12:52 PM
i have been trying to get this to work also. i used the code provided below to use the maprender listener to actually switch the map style. mostly it works, except that when i switch the map style it makes my map disappear!!



var NAKED_MAP_ID = "naked";

var thestyledmap = new Ext.Map({
title : "Our Members Map",
mapOptions : {
center : new google.maps.LatLng(50, 20),
zoom : 4,
minZoom : 4,
maxZoom : 4,
styleHtmlContent : true,
disableDefaultUI : true,
disableDoubleClickZoom : true,
mapTypeControlOptions: {
mapTypeIds: [NAKED_MAP_ID, google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]
},
mapTypeId : google.maps.MapTypeId.ROADMAP
},
listeners : {
delay : 3000,
maprender : function() {
var styled = new google.maps.StyledMapType(stylez, {name:"doesnotmatter"});
this.map.setMapTypeId(NAKED_MAP_ID);
this.map.set(NAKED_MAP_ID, styled);
}
}
});




why does the map disappear? it's like it just can't render the style.