Google map API how to add marker navigation?

Question

JavaScript

Friends, I already asked a similar question but from the other side. It’s hard for me to figure out the API, I can’t add maps to this option, with a lot of markers (in this example, there are 2 of them), and with custom tooltips for each. Add link navigation to this. Like In this version https://codepen.io/Cheizer/pen/QRKYaj
Only by links so that the transition is by lat and lng, by parameters and not by city names as in the example.
Here is my example to which I want to add navigation https://codepen.io/Cheizer/pen/zQoprQ but I don’t even know where to start. Can you please tell me the method? In the first option where there is this navigation, I can’t understand how it is implemented there, and there is an array with cities and not with coordinates.

Answer 1

If you have specific point coordinates, then I recommend looking at a basic example of setting a marker

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

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

In your example, the function of geocoding is used - searching for coordinates by the name of an object, which in your case does not make sense at all.
Add, for example, your coordinates to the dictionary like {link1: {lat: -25.363, lng: 131.044}, link2: {…}, etc.}, and then use the onclick property of the link just like in the above example and by attribute, for example, id, find the required coordinates and using the code I gave above, center the map and set the marker to this point.