web-dev-qa-db-fra.com

Marqueur personnalisé Google map avec coin arrondi css

J'ai réussi à utiliser et à appliquer mon propre marqueur sur Google Map comme ci-dessous.

var marker = new google.maps.Marker({
                            position: point,
                            map: map,                          
                            icon: pIcon,
                            optimized:false
                        });

Je voudrais ajouter un fond de coin rond comme ci-dessous css

#orangeIcon {
  width: 50px;
  height: 50px;

  overflow: hidden;
    border-top-left-radius:5px 5px;
    border-top-right-radius:5px 5px;
    border-bottom-left-radius:5px 5px;
    border-bottom-right-radius:5px 5px;
    -moz-box-shadow: 0 1px 3px #FFBF00;
    -webkit-box-shadow: 0 1px 3px #FFBF00;

    background-color: #FFBF00;
    position: relative;
    border: 5px solid #FFBF00;


}

comment y parvenir pour google map?

cssgoogle-mapsgoogle-maps-api-3
9
user3953386

Depuis la version 3.17, les objets google.maps.Marker existent dans le volet markerLayer , qui n'est qu'un nom de fantaisie pour un div.

Pour obtenir une référence à markerLayer, vous devez créer un objet OverlayView. Maintenant, cet objet est un peu abstrait. Vous devez implémenter une fonction draw pour que cela fonctionne. Par exemple, ouvrez le exemple de base dans un nouvel onglet et collez-le dans la console.

var overlay = new google.maps.OverlayView();
overlay.draw=function() {};

overlay.setMap(map);

overlay.getPanes();

il retourne:

{
    floatPane: div
    floatShadow: div
    mapPane: div
    markerLayer: div
    overlayImage: div
    overlayLayer: div
    overlayMouseTarget: div
    overlayShadow: div
}

Thay markerLayer est un div qui contient les marqueurs. Si je crée votre marqueur en utilisant une image d'icône donnée, 

var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map,                          
                icon: 'http://ruralshores.com/assets/marker-icon.png',
                optimized:false
             });

Mon marqueur sera:

enter image description here

Où le div sélectionné (celui avec z-index 103) est le markerLayer.

Si vous souhaitez accéder au marqueur par couche, vous pouvez lui ajouter une classe "markerLayer" après avoir obtenu sa référence avec la méthode getPanes. Je suppose que chaque image de la couche marqueur est un marqueur, vous pouvez donc la nommer à votre guise.

TL/DR : vous pouvez le nommer, à condition que vous ayez eu la peine de trouver la référence DOM à votre marqueur.

Edit: J'ai fait un bl.ocks pour que vous puissiez vérifier

19
amenadiel

Lorsque vous connaissez l'URL de l'image utilisée pour le marqueur, vous savez comment y accéder via CSS: utilisez un sélecteur d'attribut.

Créons un marqueur de cercle basé sur votre avatar enter image description here avec une bordure noire de 1px:

Configuration du marqueur:

icon:{
       url: 'https://www.gravatar.com/avatar/0a9745ea7ac5c90d7acadb02ab1020cd?s=32&d=identicon&r=PG&f=1',
       //the size of the image is 32x32, 
       //when you want to add a border you must add 2*borderWidth to the size
       size:new google.maps.Size(34,34)},
       //define the shape
       shape:{coords:[17,17,18],type:'circle'},
       //set optimized to false otherwise the marker  will be rendered via canvas 
       //and is not accessible via CSS
       optimized:false
     }

le CSS:

  img[src="https://www.gravatar.com/avatar/0a9745ea7ac5c90d7acadb02ab1020cd?s=32&d=identicon&r=PG&f=1"]{
    border-radius:16px;
    border:1px solid #000 !important;
  }

....terminé.

Démo: http://jsfiddle.net/doktormolle/5raf237u/

Lorsque vous utilisez une ombre, utilisez une taille plus grande (en fonction de la taille de l’ombre):

http://jsfiddle.net/doktormolle/L2o2xwj3/

12
Dr.Molle

Bonjour, j’essaie toutes ces réponses, mais personne ne travaille comme je le veux

   var map;

    function initialize() {
        var mapOptions = {
            zoom: 9,
            center: new google.maps.LatLng(40.6, -74)
        };
      map = new google.maps.Map(document.getElementById('map-canvas'),    mapOptions);

     // I create 3 markers using http://ruralshores.com/assets/marker-icon.png as icon
     var myIcon='http://ruralshores.com/assets/marker-icon.png';
     var marker1 = new google.maps.Marker({ position: {lat:40.8, lng:-74}, map: map, icon: myIcon, optimized:false });
     var marker2 = new google.maps.Marker({ position: {lat:40.6, lng:-74.5}, map: map, icon: myIcon , optimized:false });
     var marker3 = new google.maps.Marker({ position: {lat:40.5, lng:-74.3}, map: map, icon: myIcon , optimized:false });

     // I create an OverlayView, and set it to add the "markerLayer" class to the markerLayer DIV
     var myoverlay = new google.maps.OverlayView();
     myoverlay.draw = function () {
         this.getPanes().markerLayer.id='markerLayer';
     };
     myoverlay.setMap(map);

}


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

et maintenant ajouter somme CSS 

#markerLayer img {
        border: 2px solid red !important;
        width: 85% !important;
        height: 90% !important;
        border-radius: 5px;
      }

Le tutoriel complet est elle

1
Yasssine ELALAOUI

comme mentionné ci-dessus, j'ai utilisé OverlayView

var AvatarMarker = function(latlng,avatarUrl,map,id){
      this.latlng = latlng;
      this.avatarUrl = avatarUrl;
      this.setMap(map);
      this.id= id;
    };
  AvatarMarker.prototype = new google.maps.OverlayView();
  AvatarMarker.prototype.onAdd= function(){
    var img = document.createElement("img"),me=this;
    img.style.width="30px";
    img.style.height="30px";
    img.style.position="absolute";
    img.style.webkitBorderRadius="50%";
    img.style.borderRadius="50%";
    img.style.zIndex="999";
    img.src=me.avatarUrl;
    this.getPanes().overlayMouseTarget.appendChild(img);
    me.img= img;
    img.onclick = function(){
      google.maps.event.trigger(me,"click",{id:me.id});
    }
  };
  AvatarMarker.prototype.draw = function(){
    this.setLatLng(this.latlng);
  }
  AvatarMarker.prototype.onRemove = function(){
    this.img.parentNode.removeChild(this.img);
    this.img =  null;
  }
  AvatarMarker.prototype.setLatLng = function(latlng){
    if(!this.getProjection()) return ;
    var overlayProjection = this.getProjection(),
      xy=overlayProjection.fromLatLngToDivPixel(latlng);
    this.img && (this.img.style.left=(xy.x-15)+'px');
    this.img && (this.img.style.top=(xy.y-15)+'px');
    google.maps.event.trigger(this,"draw");
  }
  AvatarMarker.prototype.getLatLng = function(){return this.latlng;}

et le document associé est ici: customoverlays

0
HafeYang