我怎么能保持对齐谷歌地图

Question

如何左对齐谷歌地图，我的意思是标记位置。这是我的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
    });
}

以下是截图

默认标记位置

我希望如何

标记或位置默认居中。我希望默认情况下向左或向右。

由于

Answer 1

一种简单的方法：

最初将地图的宽度设置为例如30％。

地图的中心现在将处于这30％的中间位置。

加载地图后，请将地图的宽度设置为100％。

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

要对齐右侧的标记，请使用panBy - 方法：

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;