• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Theme Selection
Mode Selection
*Translated by Google Translator.

Example of Zoom to fit all markers in ASP.NET MVC Maps Control

This sample visualizes the capitals of all the countries in the South America continent by displaying the markers in their locations.

Zoom to fit all the makers in maps

In this example, you can see how to zoom the maps dynamically based on the location of the markers in the map. The map is scaled and the center position is changed based on the markers location. This is achieved by setting true to the shouldZoomInitially property in zoomSettings.

Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over a marker or tap a marker in touch enabled devices.

Injecting Module

Maps component features are segregated into individual feature-wise modules. To use a marker, inject the Marker module using the Maps.Inject(Marker) method.