Dessine un rectangle autour des marqueurs dans reac-google-maps au lieu d'utiliser 'icon'

Question

Je veux dessiner un rectangle autour du marqueur. J'ai essayé d'utiliser des formes à l'intérieur du marqueur. Pour l'instant, j'utilise

var shape = { 
       coords: [1, 1, 1, 30, 30, 30, 30, 1], 
       type: 'poly' 
       }; 

this.marker = new google.maps.Marker({ 
       map: map, 
       position: { 
        lat: parseFloat(company.latitude), 
        lng: parseFloat(company.longitude) 
       }, 
       shape:shape, 
       icon: { 
        url: '/src/images/blue_marker.png', 
        size: new google.maps.Size(30, 30), 
        scaledSize: new google.maps.Size(30, 30) 
       }, 
       title: company.name + ' ' + company.vacancy.vacancy     
       } 
      );  

Je ne parviens pas à voir le rectangle. Des idées à ce sujet?

Answer 1

I utilisé MarkerWithLabel au lieu de Marker. Exemple de code ci-dessous:

let marker = new MarkerWithLabel({ 
       map: this.map, 
       position: { 
        lat: parseFloat(latitude), 
        lng: parseFloat(longitude) 
       },     
       icon: { 
        path: 'M2 2 H 55 V 25 H 2 L 2 2', 
        fillColor: color, 
        fillOpacity: 1, 
        strokeColor: '#000', 
        strokeWeight: 2, 
        scale: 2,      
        size: new google.maps.Size(30, 30), 
        scaledSize: new google.maps.Size(30, 30) 
       }, 
       labelContent: company.name, 
       labelClass: "labels", 
       labelInBackground: false, 
       draggable: false, 
       labelAnchor: new google.maps.Point(-10,-10), 
       raiseOnDrag: false     
      } 
     ); 

    //CSS   
    .labels { 
      color: white; 
      font-family:"Lucida Grande", "Arial", sans-serif; 
      font-size: 8px; 
      text-align: center; 
      white-space: initial; 
      padding: 0px 0px 0px 0px; 
      } 

Answer 2

 I think this is useful for u.Changed ur location value get shapes 

     // Instantiates a new Polyline object and adds points to define a rectangle 
     PolylineOptions rectOptions = new PolylineOptions() 
       .add(new LatLng(37.35, -122.0)) 
       .add(new LatLng(37.45, -122.0)) 
       .add(new LatLng(37.45, -122.2)) 
       .add(new LatLng(37.35, -122.2)) 
       .add(new LatLng(37.35, -122.0)); 

     // Get back the mutable Polyline 
     Polyline polyline = myMap.addPolyline(rectOptions); 

    //Get Marker Location 
    LatLng position = marker.getPosition(); // 
    Toast.makeText(
        MainActivity.this, 
        "Lat " + position.latitude + " " 
          + "Long " + position.longitude, 
        Toast.LENGTH_LONG).show();