CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
slava_slava
slava_slava

Reputation: 666

How to change position back button in google street view?

I need change position into google maps street view from left to right - enter image description here

My code: 

new google.maps.Map(map_canvas, {
            center: new google.maps.LatLng(47.197363, 8.494004),
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            streetViewControlOptions: {
            //position: google.maps.ControlPosition.LEFT_TOP
        },);

How change position or rewrite HTML code for button?

Upvotes: 0

Views: 2102

Answers (4)

Morgan Touverey Quilling
Morgan Touverey Quilling

Reputation: 4343

@Slava's solution put me on the track, but like me you may need a more generic solution (also, Slava's solution did not work quite well for me, the street view panorama was not showing the first time I was dropping the little yellow man).

We just need to replace the street view config, we don't need to listen for the default one to show up:

const streetView = new google.maps.StreetViewPanorama(gmap.getDiv(), {
    visible: false,
    enableCloseButton: true,
    addressControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER
    }
});

gmap.setStreetView(streetView);

Here, I set { visible: false } so the panorama does not open immediately (ie. you'll have to drop the pawn), and I use gmap.getDiv() to reuse the Maps container.

Upvotes: 1

slava_slava
slava_slava

Reputation: 666

It's possible! I found solution: 

//init map and set options
var gmap = new google.maps.Map(map_canvas, map_options);

var thePanorama = gmap.getStreetView();

// change view
google.maps.event.addListener(thePanorama, 'visible_changed', function() {
  // Display your street view visible UI
  if (thePanorama.getVisible()) {
    
    var panorama = new google.maps.StreetViewPanorama(
      map_canvas, {
        addressControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_CENTER, // <- change position
        }
      });
    // rewrite default options  
    gmap.setStreetView(panorama);

  } else {
    console.log('show default UI');
  }
});

Upvotes: 3

Flame_Phoenix
Flame_Phoenix

Reputation: 17584

Currently we do not support the re-positioning of that control in our API.

A CSS workaroud like the one provided by @el solo lobo may work, but in the future if we change our CSS or another part of the map, it'll break.

A better solution, is to create your own controls. This way you have total control on where they appear, how they look and what they do. For more information on this topic you can read the following documentation:

Also, I would like to note that streetViewControlOptions only changes the position of the pegman icon, not the position of the controls as you intend.

If however, you don't feel like creating your own control set, and just wish to change the position of our other controls, I recommend the following example:

Hope I helped.

Upvotes: 2

el solo lobo
el solo lobo

Reputation: 993

If you want to change the position of the entire area, just do 

.widget-titlecard{
 float: right;
}

This works in the inspector on maps.google.com, haven´t tested it on my own page.

The css for the entire Area looks like this then, but I guess you just need to set float: right here

.widget-titlecard {
outline: none;
position: relative;
display: inline-block;
top: 14px;
left: 0px;
z-index: 10;
background-color: rgba(34,34,34,.8);
-webkit-transition: left 0.5s;
transition: left 0.5s;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
float: right; //This was added

}

But this is more a css hack.. the is probably an API setting for this, but I don´t know. Maybe someone post´s a better solution for this.

Upvotes: 0

Related Questions