Ajouter un encart box-shadow sur Google Maps élément
Je suis prêt à ajouter un peu de boîtier encastré-de l'ombre à une balise contenant une carte Google Maps élément. Cependant, il semble que rien ne se passe, probablement parce que Google en charge d'autres divisions de l'élément d'origine, donc couvrant l'généré box-shadow.
Comment puis-je obtenir cet effet?
Voici le code que j'ai:
<section id="map-container">
<figure id="map"></figure>
</section>
#map-container {
position: relative;
float: right;
width: 700px;
background-color: #F9FAFC;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#map {
position: relative;
height: 400px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset;
}
Merci!
OriginalL'auteur linkyndy | 2012-06-29
Vous devez vous connecter pour publier un commentaire.
C'est la façon dont je l'ai fait. La méthode suivante ne se chevauchent contrôles de la carte, de sorte que vous sera capable de manipuler la carte, c'est à dire faire glisser, cliquer, zoomer, etc.
HTML:
CSS:
DÉMO: http://jsfiddle.net/dkUpN/80/
Mise à JOUR: La vieille solution (voir 1st de révision) n'ont pas de pseudo-éléments de support et qui est compatible avec les anciens navigateurs. La démo est toujours disponible ici: http://jsfiddle.net/dkUpN/.
Qu'entendez-vous par la sémantique du code? Je vois cela comme la seule voie possible d'ajouter intérieure de l'ombre à la carte conteneur avec la préservation de manipulations de la carte. Je doute si une autre solution existe, dès que Google ne fournit pas de n'importe quel ensemble de la propriété.
Sémantique par la non-utilisation supplémentaire de balisage. Mais sinon, ton exemple est très bien. Merci!!!!
Si vous avez besoin de plus sémantique code, le voici: jsfiddle.net/dkUpN/80.
Très astucieuse solution!, merci!
OriginalL'auteur VisioN
J'ai juste eu le même problème lors de la tentative d'ajouter un encart de l'ombre à côté d'un intégré à la carte. J'ai essayé de l'ajouter à la carte-élément canvas, mais pas d'ombres étaient visibles. Aucune idée sur la raison de ce comportement, c'est peut-être la position:absolue de certains des éléments à l'intérieur de la carte.
De toute façon, au lieu d'ajouter d'autres unsemantic éléments pour le code, j'irais plutôt pour un pseudoelement faite d'une mince (5px) bande superposée à la carte:
Cela ajoute de l'ombre sur la côté gauche:
démo: http://jsfiddle.net/marcoscarfagna/HSwQA/
Pour un côté droit de l'ombre à la place:
OriginalL'auteur Marco Scarfagna
Pensé à elle. Ici, le travail CSS:
Non bien sûr, cela ne fonctionnera pas pour lui. C'est la seule solution existante. La merde, c'est que les événements de la souris ne fonctionnent pas! Toutefois, Google devrait vraiment offrir un moyen de parvenir à cet effets.
OriginalL'auteur linkyndy
Lorsqu'ils sont confrontés à ce genre de problème, j'ai l'habitude de revenir à l'utilisation des superpositions personnalisées. (https://developers.google.com/maps/documentation/javascript/overlays#AddingOverlays)
Utiliser un overlays pour ajouter une div à l'intérieur de la carte, quelle que soit la couche qui vous convient le mieux, vous serez en mesure de style de ce div en CSS.
OriginalL'auteur Quickredfox
Andrei Horak réponse qui fonctionne le mieux.
Mais Parfois avec les z-index n'est pas une option en raison de votre mise en page. En ajoutant un supplément de div à google maps est un deuxième meilleure option:
Puis dans votre google maps script:
La
pointer-events:none;
est un peu difficile à cause de la compatibilité du navigateur. En savoir plus sur le pointeur événements iciOriginalL'auteur WIWIWWIISpitFire
Une autre option, bien que ne travaillant pas dans tous les cas, est de mettre le box-shadow sur l'élément à côté de la carte. Google se fait de cette façon ici
OriginalL'auteur cgat
Vous aurez besoin de regarder les éléments que Google est l'ajout et la cible et remplacent celles avec vos styles CSS. L'utilisation de Firebug, webkit "inspecter l'élément", etc. pour voir les éléments qui sont ajoutés et de leurs styles.
OriginalL'auteur Joshua
Si vous êtes à la recherche pour le style de l'infowindow ont un coup d'oeil à cette question.
Cela s'applique à la plupart des objets qui apparaissent sur google maps. De le cibler avec votre propre feuille de style css est possible mais je doute que quiconque ne l'a jamais fait parce que c'est dur (j'ai essayé).
Oh. Ok alors. Je vais vous montrer moi-même 🙂
OriginalL'auteur Per Salbark
J'ai ajouté un supplément qui contient le médaillon de l'ombre.
HTML:
...
#mapContainer{
position:relative;
}
OriginalL'auteur patrick brady