How to correctly implement switching between maps (Google Maps)?

Question

JavaScript

Can you please tell me how to implement switching between maps correctly? there is a map with marks of shops in one city and there is in another. Switching between cities, one map disappears, another appears. If you just hide CSS through opacity and visibility , when you click on the link, the movement between cities (points) goes on the same map. (That is, let's say if we look at the points of city A, and go through the points of this city, the movement takes place on the map of city B). If you hide one map through display none , then when you return to it, it is not displayed correctly (it is not initialized)
and how is it correct? throw everything into one function (just use different containers)? and is it possible somehow for each point not to create a marker separately, but to create an object with all addresses and coordinates and create a marker and content for each through a loop? I saw the solution for Yandex, I haven’t figured it out with Google yet

Answer 1

when hiding with display:none and then showing, use stackoverflow.com/questions/4700594/google-maps-di...