How do I centre a map in the "centre" of the city?

Hi guys,

I’m displaying multiple hotel pins on a map (and most of the are in the central area of the cities). However, the map is not really centered? Is there a way to set the pin in the “centre” of the city? How would I do that?

and 2. how would I add the blue dot as in the current user’s position?

thaaanks!!

You set map markers and centered points using coordinates. You need to know the coordinates of the center of city. For user position you need coordinates as well.

Hi Boston,

Thanks a lot, but this is a difficult option. It would mean that I would have to create a separate db entry with “city centre” coordinates just for this, and for every single city. I thought there’s something easier.

How do I display the blue bubble of the current user’s position and how do I get the current coordiantes?

Sometimes the method to achieve the result we want is not the method we want, but the only method there is.

In your case, I’d explore APIs that can give you the coordinates. For clients of mine, I usually advise them to be realistic in their launch and focus on a smaller location area, dominate that area, then expand since it’s usually easier to become a large fish in a small pond. But if your app idea requires the service area to be so large you can not isolate a couple hundred cities to get the data for, then an API might be available to fetch it only when needed.

For current user position use the built in expression of current user geographic position.

1 Like

You mean like a generic geo API that gives me the centre for any city in the world?

In regards to the current position of the user, would I have to create a “dot” (marker)myself an put the current user location on that?

If you set the markers to none, then you can set the initial position to the centre of the map.
Also you might need to note, that if you are previewing on desktop, google maps doesnt always centre accurately, try previewing on mobile for accuracy.

1 Like

Thanks a lot, BUT! I do want to show the markers with the pins (hotels). I just want the map to be centred, and display all the pins (hotels)

When showing a list of locations the map usually centers itself based on the markers so as to be sort of in the middle of the markers. But you need to also set your zoom level correctly for it to look centered.

Do some tests. Put just two markers, then 10, then 20 and see how initial position of map center is different. Test with different zoom levels too and see how it looks different when first rendered.

Look for information on dynamic map markers as well, for blue dot of user position. Might need a plugin.

1 Like

I think I can insert the blue dot user location based on the guide here
How to incorporate geolocation in a Bubble.io app? | RapidDev.

1 Like