How I can left align the google maps

问题

How to left align the google maps, I mean the marker positions. Here is my JS

function showGoogleMaps() {

    var latLng = new google.maps.LatLng(position[0], position[1]);

    var mapOptions = {
        zoom: 16, 
        zoomControl:false,
        mapTypeControl:false,
        streetViewControl: false, // hide the yellow Street View pegman
        scaleControl: true, // allow users to zoom the Google Map
        mapTypeId:ROADMAP,
        center: latLng,
        scrollwheel: false,
        styles: styles

    };

    map = new google.maps.Map(document.getElementById('googlemaps'),
        mapOptions);

    // Show the default red marker at the location
    marker = new google.maps.Marker({
        position: latLng,
        map: map,
        draggable: false,
        title: 'Hello',
        animation: google.maps.Animation.DROP
    });
}

Here are the screenshots

The default marker location

How I want this to be

The marker or location is centered by default. I want that either to the left or right by default.

Thanks

回答1:

A simple approach:

Initially set the width of the map to e.g 30%.

The center of the map now will be in the middle of these 30%.

Once the map is loaded set the width of the map to 100%.

function initialize() {

  var goo = google.maps,
    map = new goo.Map(document.getElementById('googleMap'), {}),
    markers = [{
      pos: new goo.LatLng(26.1445169, 91.7362)
    }, {
      pos: new goo.LatLng(26.2571285, 92.05991)
    }, {
      pos: new goo.LatLng(26.3143518, 91.0497609)
    }, ],
    bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; ++i) {
    new google.maps.Marker({
      map: map,
      position: markers[i].pos
    });
    bounds.extend(markers[i].pos);
  }
  map.fitBounds(bounds);

  goo.event.addListenerOnce(map, 'idle', function() {

    this.getDiv().style.width = '100%';
    goo.event.trigger(this, 'resize');
  });
}

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

html,
body,
#map_wrapper,
#googleMap {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#googleMap {
  width: 30%;
}

<div id="map_wrapper">
  <div id="googleMap"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

To align the markers on the right additionally use the panBy-method:

function initialize() {

  var goo = google.maps,
    map = new goo.Map(document.getElementById('googleMap'), {}),
    markers = [{
      pos: new goo.LatLng(26.1445169, 91.7362)
    }, {
      pos: new goo.LatLng(26.2571285, 92.05991)
    }, {
      pos: new goo.LatLng(26.3143518, 91.0497609)
    }, ],
    bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; ++i) {
    new google.maps.Marker({
      map: map,
      position: markers[i].pos
    });
    bounds.extend(markers[i].pos);
  }
  map.fitBounds(bounds);

  goo.event.addListenerOnce(map, 'idle', function() {

    this.getDiv().style.width = '100%';
    this.panBy(-(this.getDiv().offsetWidth/1.5),0);
    goo.event.trigger(this, 'resize');
  });
}

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

html,
body,
#map_wrapper,
#googleMap {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#googleMap {
  width: 30%;
}

<div id="map_wrapper">
  <div id="googleMap"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

来源：https://stackoverflow.com/questions/35533717/how-i-can-left-align-the-google-maps