Streetview placeholder is here, but Pegman is missing

Question

I've integrate the googlemaps api but Pegman is missing from the streetview little white square (bottom right)

I've notice that some div that hold the pegman icon in googlemaps code have height and width equal at 0px what can I do to fix that ?

Here's a sample of how I called and initiate my map

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

Here's my map component :

<div class="map-box" id="map" #map></div>

with css.js looking like

.map-box {
    height: 100%;
    width: 100%;
}

and how I create it :

    var ownPos = {lat: -4.85, lng: 2.35};
    this.mapDisplay = new google.maps.Map(document.getElementById('map'), {zoom: 4, center: ownPos, streetViewControl: true});

Grasshopper

Probably a CSS problem. Please provide a minimal reproducible example that demonstrates your issue. – Irishman

That is very minimal, but it doesn't allow me to reproduce your issue (and you didn't include any of the required CSS (which is likely where the issue is)) – Irishman

@Irishman Here I added the CSS and even the index.html where I call the API, it's really all what I do, (beside placing markers when clicking a button) nothing more so ... yep ... – Dave

As I said, the posted code doesn't reproduce your issue. It is missing at least this: html, body { height: 100%; width: 100%; padding: 0px; margin: 0px; } to show the map; and when I add that, it shows the map and the pegman. (fiddle). Therefore while it might be minimal, it is not complete (and you didn't verify it reproduces the issue) – Irishman

'/deep/' was deprecated as of 2017. I have the same issue and the solution still left a blank white square where Pegman should be. Is there a solution without using '/deep/'? – Cropeared

Answer 1

fixing of wrappers' height solved the same bug

agm-map {
  height: 425px;
  & /deep/ .gm-svpc { //dispayed pegman's icon on map
    div {
      height: 40px;
    }
  }
}

Satsuma

Answer 2

I had this same issue and solved it with some CSS:

/* Force position to show pegman */
.gm-svpc div img {
    position: relative !important;
}

Dionnadionne

Nice! But there is one drawback with this fix: When the pegman icon is hovered, the tilted pegman symbol is smaller than it should be. – Ingenuous

Answer 3

 /* there are actually two `<div>`s, with the 2nd one actually holding the symbol */
.gm-svpc > div:last-of-type {
  /* same dimensions as symbol child element */
  width: 32px;
  height: 32px;
}

Ingenuous