Position personnalisée Google Maps (API v3)

Question

Je souhaite être en mesure d'ajuster la position du contrôle de type de carte. Je l'ai placé en haut à droite mais je dois le laisser tomber d'environ 50 pixels. J'ai lu sur les contrôles personnalisés que vous pouvez tamponner le DIV, qu'en est-il des contrôles non personnalisés? Puis-je étendre le contrôle?

Ci-dessous le code HTML généré par l'API pour le contrôle:

<div class="gmnoprint" style="margin: 5px; z-index: 11; position: absolute; cursor: pointer; text-align: left; top: 0px; right: 0px;"> 
<div style="width: 80px; position: relative; overflow: hidden; border: 1px solid black;"> 
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 0px 5px; font-weight: bold; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112) rgb(208, 208, 208) rgb(208, 208, 208) rgb(112, 112, 112);" title="Change map style">Map<img style="position: absolute; right: 4px; top: 4px; display: block;" src="http://maps.gstatic.com/intl/en_us/mapfiles/down-arrow.gif"></div> 
</div> 
<div style="border: 1px solid black; width: 80px; display: none;"> 
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show street map">Map</div> 
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show satellite imagery">Satellite</div> 
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show imagery with street names">Hybrid</div> 
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show street map with terrain">Terrain</div> 
</div></div> 

Comme solution provisoire, je suis en utilisant le code jquery suivant pour modifier le rembourrage de ce contrôle spécifique:

$('[title="Change map style"]').parent().css('padding-top', '36px'); 

Loin de l'idéal, mais fait le travail dans ce cas:/

Answer 1

On dirait que vous devriez être en mesure de déplacer cela en utilisant CSS (et peut-être certains JS). J'ai visité http://maps.google.com et il semble que ces contrôles ont un ID ('lmc3d' dans mon cas) et sont positionnés absolument. Avez-vous essayé quelque chose comme ceci dans votre feuille de style:

#lmc3d{ 
    top: 50px; /* adjust these two to move */ 
    left: 50px; 
} 

Answer 2

Nous avons piraté ceci. Avec l'aide de jQuery, nous étiquetons les éléments avec une classe ou un identifiant en fonction de leurs éléments de style personnalisés lors de la création de la carte. Cela nous permet de faire des choses comme ('.zoom_controls'). Css ('top', '50px') pour déplacer les commandes de zoom vers le bas.

C'est un hack qui pourrait casser à tout moment, mais cela fonctionne pour nous à la v3.4. Nous reviendrons quand cela deviendra un problème. Je ne sais pas pourquoi Google ne met tout simplement pas d'ID.

• Classes: https://gist.github.com/887917
  
• les ID: https://gist.github.com/887918

Answer 3

Une façon de le faire serait avec JQuery, comme Mat.E dit là-bas, mais au lieu de rechercher le contrôle par spécifique style css, un moyen facile serait de rechercher l'élément avec une classe gmnoprint qui a un enfant div contenant le texte 'Carte' (qui est le MapTypeControl que vous cherchez)

$('.gmnoprint>div>div:contains("Map")').parent().parent().css('margin-left','35px'); 

Answer 4

Vous pouvez le faire avec CSS seulement. Rembourrage top seul exemple:

#your_map_id_container .gm-style .gmnoprint{ 
    margin-top: 100px! important; 
} 

#your_map_id_container .gm-style .gmnoprint .gmnoprint{ 
    margin-top: 0px !important; 
}