CODEWITHSUNDEEP
javascriptcssgoogle-mapsbuttongoogle-maps-api-3
Florent Vielfaure
Florent Vielfaure

Reputation: 126

How to customize the display of mapTypes buttons in Google Maps JS API v3

I want to customize the display of the buttons that handle the change of mapTypes (TOP_RIGHT of canvas by default).

I haven't found any mapTypes customization functions except the MapTypeControlStyle object, but it's very limited. I want to control the visual style of the buttons.

In addition, the generated div element by button doesn't contrains IDs or something to get them properly :

<div draggable="false" style="direction: ltr; overflow: hidden; text-align: center; position: relative; color: rgb(0, 0, 0); font-family: Arial, sans-serif; -webkit-user-select: none; font-size: 13px; background-color: rgb(255, 255, 255); padding: 1px 6px; border: 1px solid rgb(113, 123, 135); -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px; font-weight: bold; min-width: 63px; background-position: initial initial; background-repeat: initial initial;">The map type</div>

Any ideas?

Upvotes: 0

Views: 2358

Answers (2)

Premshankar Tiwari
Premshankar Tiwari

Reputation: 3106

You can add your own custom buttons and assign your function to them....

Have a look at this

Upvotes: 0

Florent Vielfaure
Florent Vielfaure

Reputation: 126

After a few searches on the web, I found nothing about deep customization of the default map type google api buttons.

So here is a way to re-create them from scratch and customize them by css.

First, disable the default buttons with :

map.setOptions({disableDefaultUI: true});

Then, you can create an object to handle the management of the custom buttons :

function DrawMapTypeControl(map, mapTypeName, controlPos) {
  // Set div & css for the mapType button
  var controlDiv = document.createElement('div');
  controlDiv.className = 'map_type_button';
  controlDiv.index = 1;
  map.controls[controlPos].push(controlDiv);

  // Set div & css for the control border.
  var controlUI = document.createElement('div');
  controlDiv.className = 'map_type_button_border';
  controlDiv.appendChild(controlUI);

  // Set div & css for the control interior.
  var controlText = document.createElement('div');
  controlDiv.className = 'map_type_button_interior';
  controlText.innerHTML = '<strong>' + mapTypeName + '</strong>';
  controlUI.appendChild(controlText);

  // Setup the click event listener: simply set the map type.
  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setMapTypeId(mapTypeName);
  });
}

Where mapTypeName is the map type ID (such as google.maps.MapTypeId.ROADMAP) and controlPos is the position of the button on the map canvas (such as google.maps.ControlPosition.TOP_RIGHT for the default ones).

Finally, just call the creation of the button in the initialize function :

var roadmapButton = new DrawMapTypeControl(map, 
                                           google.maps.MapTypeId.ROADMAP, 
                                           google.maps.ControlPosition.TOP_RIGHT);

Here it is, fresh custom buttons, and you just have to add some css for map_type_button, map_type_button_border and map_type_button_interior classes.

Hope this will help.

Upvotes: 1

Related Questions