问题描述:

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

网友答案:

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>
相关阅读:
Top