Google Maps API Styled Map Wizard

Have any one done changing design of World Map with Styled Map Wizard ?

I was trying to change the way google map looks but I am still struggling.

Those of you who knows how to chage google map design, please give me advice.

Thank you,

Not done anything with it, but I think you need to look at the map.html template.

In there you see

    BxWmapOnloadCallback__suffix__ = function ()    {

        var mapOptions = {
            scrollwheel: false,
            draggable: (1 == __map_is_dragable__) ? true : false,
            zoom: __map_zoom__,
            center: new google.maps.LatLng(__map_lat__, __map_lng__),
            panControl: false,
            overviewMapControl: (1 == __map_is_overview_control__ ? true : false),
            overviewMapControlOptions: { opened: false },
            disableDoubleClickZoom: false,
            zoomControl: true,
            zoomControlOptions: { style: google.maps.ZoomControlStyle.DEFAULT },
            mapTypeControl: (1 == __map_is_type_control__ ? true : false),
            mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DEFAULT },
            scaleControl: (1 == __map_is_scale_control__ ? true : false),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

This is where I believe you can add the map style.

For more information see: https://developers.google.com/maps/documentation/javascript/reference?hl=nl&csw=1#MapOptions

Hi Denre

Thank you for your advice!!

I will try that. If I have figure it out I will post again.

Thanks,

Hi

I have replaced code as below but blank map.

-------------------------------

        var mapOptions = {
            scrollwheel: false,
            draggable: (1 == __map_is_dragable__) ? true : false,
            zoom: __map_zoom__,
            center: new google.maps.LatLng(__map_lat__, __map_lng__),
            panControl: false,
            overviewMapControl: (1 == __map_is_overview_control__ ? true : false),
            overviewMapControlOptions: { opened: false },
            disableDoubleClickZoom: false,
            zoomControl: true,
            zoomControlOptions: { style: google.maps.ZoomControlStyle.DEFAULT },
            mapTypeControl: (1 == __map_is_type_control__ ? true : false),
            mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DEFAULT },
            scaleControl: (1 == __map_is_scale_control__ ? true : false),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            Feature type: all,
            Element type: all,
            Visibility:    on,
            Weight:    1.3,
            Hue: #ff0077,
            Saturation:    -22,
            Lightness: -3,
            Gamma: 1.74,
            Feature type: all,
            Element type: all,
        }

------------------------------

For those of you that have done this, please give me an advice.

Thanks!

Here a simple, but complete example

https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple

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

var MY_MAPTYPE_ID ='custom_style';

function initialize(){

  var featureOpts =[
    {
      stylers:[
        { hue:'#890000'},
        { visibility:'simplified'},
        { gamma:0.5},
        { weight:0.5}
      ]
    },
    {
      elementType:'labels',
      stylers:[
        { visibility:'off'}
      ]
    },
    {
      featureType:'water',
      stylers:[
        { color:'#890000'}
      ]
    }
  ];

  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 ={
    name:'Custom Style'
  };

  var customMapType =new google.maps.StyledMapType(featureOpts, styledMapOptions);

  map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
}

google.maps.event.addDomListener(window,'load', initialize);

Thank you for your advice.

When map customization has done I will post again.

Thank you.