UName10
asked on
Google map style - changing colours
My Google map here has the following styles applied:
I'd like the map to have these options as specified in the google documentation:
Updated code which still doesn't work:
<div class="small-map" style="width:100%;height:163px;background:url(http://maps.google.com/maps/api/staticmap?center=<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>&zoom=13&size=348x250&markers=color:red%7Clabel:A%7C<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>&sensor=false&maptype=roadmap&visual_refresh=true&style=feature:road|element:labels|weight:0.3|color:0x050608&style=feature:poi|element:labels|weight:0.4|color:0x1b1a1b&style=feature:poi|color:0xffffff) center no-repeat;">
I'd like the map to have these options as specified in the google documentation:
var styleArray = [
{
featureType: "all",
stylers: [
{ saturation: -80 }
]
},{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
{ hue: "#00ffee" },
{ saturation: 50 }
]
},{
featureType: "poi.business",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
Updated code which still doesn't work:
<div class="small-map" style="width:100%;height:163px;background:url(http://maps.google.com/maps/api/staticmap?center=<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>&zoom=13&size=348x250&markers=color:red%7Clabel:A%7C<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>&sensor=false&maptype=roadmap&visual_refresh=true&style=feature:road|element:labels|weight:0.3|color:0x050608&style=feature:poi|element:labels|weight:0.4|color:0x1b1a1b&style=feature:poi|color:0xffffff) center no-repeat;"></div></a>
<script type="text/javascript">
function initialize() {
// Create an array of styles.
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(55.6468, 37.581),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I'll check it out...thanks for the reply
<script type="text/javascript">
initialize();
function initialize() {
....
}
</script>