Change Google Map position so that the marker location is not in the center

Question

I want to change my google map (marker position) to right

current marker location:

I want marker location here:

here is my code

        var uluru = {lat: 22.298337, lng: 114.174358};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 16,
                center: uluru
            });
            var image ="assets/images/marker.png";
            var marker = new google.maps.Marker({
                position: uluru,
                map: map,
                icon: image

            });

I think this question https://stackoverflow.com/questions/14305876/how-to-move-the-center-position-of-google-map should help you. — Magiczne, Aug 21 '20 at 13:34
Example: center: {lat: uluru.lat, lng: uluru.lng - 0.004206} — Aks Jacoves, Aug 21 '20 at 13:50

score 0 · Accepted Answer · answered Aug 21 '20 at 15:06

Use a separate location for the map center, adjust that so the marker appears where you want it to:

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 16,
  center: {lat: 22.298337, lng: 114.17}
});

code snippet:

function initMap() {
  var uluru = {
    lat: 22.298337,
    lng: 114.174358
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {lat: 22.298337, lng: 114.17}
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

Change Google Map position so that the marker location is not in the center

1 Answers1