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,


map.jpg · 565.1K · 521 views
Quote · 21 Sep 2013

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

Dedicated servers for as little as $32 (28 euro) - See http://denre.com for more information
Quote · 21 Sep 2013

Hi Denre

Thank you for your advice!!

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

Thanks,

Quote · 21 Sep 2013

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!

Quote · 21 Sep 2013

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);
Dedicated servers for as little as $32 (28 euro) - See http://denre.com for more information
Quote · 21 Sep 2013

Thank you for your advice.

When map customization has done I will post again.

Thank you.

Quote · 23 Sep 2013
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.