Custom Google Map API V3 Zoom Buttons

问题:

How can I customize the google maps api (v3 javascript) zoom buttons to my own image.

回答1:

I am late at the party, but here is my two cents.

You have basically two options:

Option 1: You either create the controls using HTML/CSS yourself, which you can then place over the map to the correct position using position absolute or similar means. Even though this works in production, I don't like this, because your HTML/CSS for the element doesn't load at the same time than the map is displayed. Also you are separating your HTML/CSS code for the controls so it is harder to reuse the same map at different pages. e.g. "Did I forgot to add the controls?"

Option 2: You create a custom control which looks and feels the zoom controllers you like. Below is an code about this in practice.

In short, you need to first disable the normal UI controllers by calling:

var mapOptions = {
    zoom: 12,
    center: chicago,
    /* Disabling default UI widgets */
    disableDefaultUI: true // <-- see this line
}

And then you just create the controller and use it.

HTML:

... 
<div id="map-canvas"></div>
...

CSS:

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

JavaScript:

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

/**
 * The ZoomControl adds +/- button for the map
 *
 */
function ZoomControl(controlDiv, map) {

  // Creating divs & styles for custom zoom control
  controlDiv.style.padding = '5px';

  // Set CSS for the control wrapper
  var controlWrapper = document.createElement('div');
  controlWrapper.style.backgroundColor = 'white';
  controlWrapper.style.borderStyle = 'solid';
  controlWrapper.style.borderColor = 'gray';
  controlWrapper.style.borderWidth = '1px';
  controlWrapper.style.cursor = 'pointer';
  controlWrapper.style.textAlign = 'center';
  controlWrapper.style.width = '32px'; 
  controlWrapper.style.height = '64px';
  controlDiv.appendChild(controlWrapper);

  // Set CSS for the zoomIn
  var zoomInButton = document.createElement('div');
  zoomInButton.style.width = '32px'; 
  zoomInButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")';
  controlWrapper.appendChild(zoomInButton);

  // Set CSS for the zoomOut
  var zoomOutButton = document.createElement('div');
  zoomOutButton.style.width = '32px'; 
  zoomOutButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")';
  controlWrapper.appendChild(zoomOutButton);

  // Setup the click event listener - zoomIn
  google.maps.event.addDomListener(zoomInButton, 'click', function() {
    map.setZoom(map.getZoom() + 1);
  });

  // Setup the click event listener - zoomOut
  google.maps.event.addDomListener(zoomOutButton, 'click', function() {
    map.setZoom(map.getZoom() - 1);
  });  

}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');

  var mapOptions = {
    zoom: 12,
    center: chicago,
    /* Disabling default UI widgets */
    disableDefaultUI: true
  }

  map = new google.maps.Map(mapDiv, mapOptions);

  // Create the DIV to hold the control and call the ZoomControl() constructor
  // passing in this DIV.
  var zoomControlDiv = document.createElement('div');
  var zoomControl = new ZoomControl(zoomControlDiv, map);

  zoomControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv);
}

initialize();

Note: This code doesn't contain any fancy icons and a like, just placeholders. Therefore, you might need to tune it to fit your needs. Moreover, remember to add HTML5 normal tags and script include for the google maps api v3 javascript. I added only <div id="map-canvas"></div> because a need for rest of the body is pretty obvious.

To see it live: Here is working jsfiddle example

Cheers.

回答2:

After hours searching I found the solution Just make sure you replace your API ID! Enjoy!

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=YOUR-MAP_API-ID&sensor=false&region=AU">
    </script>



<script type="text/javascript">

function HomeControl(controlDiv, map) {

 google.maps.event.addDomListener(zoomout, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 0){
     map.setZoom(currentZoomLevel - 1);}     
  });

   google.maps.event.addDomListener(zoomin, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 21){
     map.setZoom(currentZoomLevel + 1);}
  });

}

var map;
var markersArray = [];


function initialize() {

  var mapDiv = document.getElementById('map-canvas');
  var myLatlng = new google.maps.LatLng(-33.90224, 151.20215);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,
    Marker: true,
    panControl: false,
    zoomControl: false,
    streetViewControl: false,
    overviewMapControl: false,
     mapTypeControl: false,
     mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(mapDiv, mapOptions);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hello World!"
  });

  // Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map);

}

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

</script>

</head>




  <body>
    <div id="map-canvas"></div>
    <div id="zoomout" style="border:1px solid; width:150px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
    <div id="zoomin" style="border:1px solid; width:150px; cursor:pointer; ">ZOOM ME IN</div>
  </body>
</html>

回答3:

I did it in the CSS way:

#map-container .gm-style > .gmnoprint > .gmnoprint { background: url(/images/map-zoom-controls.png) no-repeat center center !important; width: 42px !important; height: 68px !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint > div > img { display: none !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom in"] { top: 2px !important; left: 2px !important; width: 38px !important; height: 31px !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom out"] { top: 35px !important; left: 2px !important; width: 38px !important; height: 30px !important; }

This is for a image that has: width: 42px; height: 68px;

Make your own adjustments.

ATTENTION

This applies only if you are using English version because of the title attributes.

回答4:

This isn't possible. You can tweak their appearance a bit using a set of predefined option parameters or you can implement your custom map control that provides the same functionality as the zoom control. For more information see this page.

UPDATED: Link fixed. Thanks for the feedback!