mapsplugin / cordova-plugin-googlemaps

Google Maps plugin for Cordova
Apache License 2.0
1.66k stars 918 forks source link

Make sure all markers are visible and set the zoom level accordingly? #2862

Closed spinninghamster closed 3 years ago

spinninghamster commented 3 years ago

I've been looking in the documentation for quite some time but can't find an answer or where to get started.

I have 3 markers on a simple map and I just whenever the map loads want to ensure they are all shown on the map and therefor also adjust the zoom level accordingly. How do I achieve that?

They are placed with:

var marker_driver = map.addMarker({
  'position': location,
  'map': map,
  'icon': {
       'url': 'url'
 }  
});
wf9a5m75 commented 3 years ago
const markerData = [
  { position : { lat: xxx, lng: xxx}, icon: { ... }, name: "marker1"}},
  { position : { lat: xxx, lng: xxx}, icon: { ... }, name: "marker2"}},
  { position : { lat: xxx, lng: xxx}, icon: { ... }, name: "marker3"}},
];

var map = plugin.google.maps.getMap(div, {
  camera: {
    target: [
       markerData[0].position,
       markerData[1].position,
       markerData[2].position
    ]
  }
});

map.one(plugin.google.maps.MAP_READY, () => {

  const markers = markerData.map((data) => {
    return map.addMarker(data);
  });

});

If you pass the array of LatLng or ILatLng to the camera, this plugin calculates the center and zoom automatically.

spinninghamster commented 3 years ago

Thanks a lot! You saved me day :)