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

            });

Answer 1

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

Question

1 answers

solution1
0 ACCPTED 2020-08-21 15:06:38

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

Question

1 answers

solution1 0 ACCPTED 2020-08-21 15:06:38

solution1
0 ACCPTED 2020-08-21 15:06:38