ansaurus

Question

Gmaps v3 Change style of MapTypeControlStyle DROPDOWN_MENU

Answer 1

A:

You can use the setOptions method on the Map object to accomplish what you want:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;
</script>
<script type="text/javascript" 
        src="http://maps.google.com/maps/api/js?sensor=false"&gt;
</script>
<script type="text/javascript">
  $(document).ready(function() {
    var mapOptions = {
      zoom: 4,
      center: new google.maps.LatLng(-33, 151),
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      },
      navigationControl: true,
      navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);  


    $('#link-drop-down').click(function() {
      map.setOptions({
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
      });
    });

    $('#link-hbar').click(function() {
      map.setOptions({
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
        }
      });
    });
  });  
</script>


</head>
<body onload="initialize()">
  <a id="link-drop-down" href="#">Change to Drop Down Menu</a>
  <a id="link-hbar" href="#">Change to Horizontal Bar</a>
  <div id="map_canvas" style="width:500px; height:500px"></div>
</body>
</html>

sheikhomar 2010-10-23 17:48:10

Sorry i talk about style css of this dropdown and not changing one type to another. my question it's not clearly i apologize. I search to modify this defaut selector addind left and right div and background img.

2010-10-25 11:26:07

I still don't understand what you want to do. Can you provide some code or an example?

sheikhomar 2010-10-25 11:39:41

Answer 2

A:

I think you mean you want to change the look of the drop down menu. That is not possible with the API and if you want a different looking drop down menu then you will need to write your own custom control, you can read more on the docs http://code.google.com/apis/maps/documentation/javascript/controls.html#CustomControls

skarE 2010-10-29 17:43:30

ansaurus

tags:

views:

answers:

Gmaps v3 Change style of MapTypeControlStyle DROPDOWN_MENU

related questions