How to position viewport to top center marker google maps

Question

I am new to google maps and following is code snippet of google maps The marker is in middle of the screen but how can I appear at top center (top middle as illustrated in image) of the screen.

function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

window.initMap = initMap;

The marker is in the middle of the screen because you set its lat/lng coordinates, and the map centers itself on those coordinates too. You can put a marker at any coordinates you want but have the map center somewhere else if you prefer. But what you can't do (iirc) is place a marker "at the top of the frame" - the API won't understand that. — Andy, Apr 06 '23 at 15:26
@Andy in my example, imagine the red marker I put there is the google market, how can I make sure that is in viewport or near google maps show the google market at top of the screeen — localhost, Apr 06 '23 at 15:39

Kamran Allana · Accepted Answer · 2023-04-12T12:34:25.663

1

PanTo(): https://developers.google.com/maps/documentation/javascript/reference/map#Map.panTo

This function is used to set the center position of the map:

panTo(latLng)

Parameters: latLng: LatLng|LatLngLiteral The new center latitude/longitude of the map.

Return Value: None

Changes the center of the map to the given LatLng. If the change is less than both the width and height of the map, the transition will be smoothly animated.

So this will you to set center position according to marker.

function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });

  // map position set to center according to marker position
  map.panTo(myLatLng);
}

window.initMap = initMap;

This will also help you: Google Maps PanTo OnClick

UPDATE

http://jsfiddle.net/kamrankb/6mxopg0n/2/

edited Apr 12 '23 at 12:34

answered Apr 11 '23 at 08:43

Kamran Allana

543
1
6
25

Great, the only problem is that by default it centers the marker but I wanna put the viewport of maps such that the market at top of screen – localhost Apr 11 '23 at 11:36
1

Ohh okay, for top center you can do as it's defined in the google map docs: https://developers.google.com/maps/documentation/javascript/examples/control-positioning let me update the answer for more specific perspective. – Kamran Allana Apr 11 '23 at 14:36
@localhost this answer would be more helpful https://stackoverflow.com/questions/8146676/google-maps-api-v3-offset-panto-by-x-pixels – Kamran Allana Apr 12 '23 at 12:06
1

@localhost you can see the desired output as per my understanding http://jsfiddle.net/kamrankb/6mxopg0n/2/ – Kamran Allana Apr 12 '23 at 12:32
Thanks, what is advice on getting good understanding for documentation? what your advice be? – localhost Apr 12 '23 at 13:47
You're welcome @localhost, I thoroughly search on options side first according to requirement to find solution according to requirement but the best way might be to understand the dynamics of properties and their functions just skimming would help a lot to have a better understanding of documentation. – Kamran Allana Apr 12 '23 at 15:28
1

Most of the time stuck in documentation as wouldn't get the possible example or implementation of method so search the term/method to learn more about it to have a clear understanding. – Kamran Allana Apr 12 '23 at 15:29

Muhammad Umair · Answer 2 · 2023-04-11T08:42:19.757

Simply, to the specified location you can use the Map.panTo() method and to set the zoom level you can use the Map.setZoom() method.

You can test it to see if it's useful to you, and if you want any changes, just let me know and I'll make them.

function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });

  const marker = new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });

  // Set the map center to the marker position
  map.panTo(myLatLng);

  // Set the zoom level to 12
  map.setZoom(12);
}

window.initMap = initMap;

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps Example</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

How to position viewport to top center marker google maps

2 Answers2