How I can left align the google maps - google-maps

Question

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

Answer 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>