Aangepaste Google Map API V3 zoomknoppen

Hoe kan ik de zoomlens van Google Maps api (v3 javascript) aanpassen aan mijn eigen afbeelding.

13

4 antwoord

Ik ben laat op het feest, maar hier is mijn twee cent.

Je hebt in principe twee opties:

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.

Kort gezegd, u moet eerst de normale UI-controllers uitschakelen door te bellen naar:

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

En dan maak je gewoon de controller aan en gebruik je deze.

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();

Opmerking: deze code bevat geen fancy pictogrammen en dergelijke, maar slechts plaatsaanduidingen. Daarom moet u deze mogelijk afstemmen op uw behoeften. Vergeet bovendien niet om HTML5 normale tags en script include toe te voegen voor de Google maps api v3 javascript. Ik heb alleen <div id = "map-canvas"> </div> toegevoegd omdat een behoefte aan rest van het lichaam vrij duidelijk is.

To see it live: Here is working jsfiddle example

Proost.

19
toegevoegd
Dit werkt geweldig, dank je! Een kleine verbetering zou kunnen zijn om de namen van de zoomregelaars klasse te geven, zoals controlWrapper.setAttribute ("class", "custom-zoom-wrapper"); etc. Dit betekent dat stijlen kunnen worden toegevoegd in CSS in plaats van JS, wat leidt tot schonere code en het mogelijk maken van mediaquery's, d.w.z. kleinere knoppen op kleinere schermen.
toegevoegd de auteur Davey, de bron
Heel erg bedankt hiervoor.
toegevoegd de auteur Barlas Apaydin, de bron
Dat is geweldig.
toegevoegd de auteur Andrew Swift, de bron

Na uren zoeken vond ik de oplossing Zorg ervoor dat u uw API-ID vervangt! Genieten!

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    
    <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>
14
toegevoegd

Dit is niet mogelijk. U kunt hun uiterlijk een beetje aanpassen met behulp van een set vooraf gedefinieerde optieparameters of u kunt uw aangepast kaartbeheer implementeren dat dezelfde functionaliteit biedt als de zoomknop. Raadpleeg deze pagina voor meer informatie.

BIJGEWERKT: koppeling hersteld. Bedankt voor de feedback!

4
toegevoegd
Corrigeer je link of plaats de relevante instructies in je antwoord.
toegevoegd de auteur Sparky, de bron
Vaste link hier . Hij miste net de "L" aan het einde van "htm".
toegevoegd de auteur RASG, de bron
Bedankt jongens! De link verholpen!
toegevoegd de auteur Stefan Kovachev, de bron
de link werkt niet?
toegevoegd de auteur HAWKES08, de bron

Ik deed het op de CSS-manier:

#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; }

Dit is voor een afbeelding met: breedte: 42px; hoogte: 68 px;

Maak je eigen aanpassingen.

LET OP

Dit is alleen van toepassing als u de Engelse versie gebruikt vanwege de titelkenmerken.

3
toegevoegd
Erg goed! Werkt prima voor mij!
toegevoegd de auteur SquareCat, de bron
Dit werkt zolang de structuur die wordt gegeven door de gebruikersinterface van Google Maps ongewijzigd blijft, u moet nooit vertrouwen op hard gecodeerde regels om uw doel te bereiken.
toegevoegd de auteur torresomar, de bron