# GoogleMaps

The [GoogleMaps ](https://cloud.google.com/maps-platform/)extension lets you control Google Maps as a fully integrated server control. The control fires events back to the server and the server can affect any visual aspect of the map.

![](https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MFp7MR1wemvcC5891_r%2Fuploads%2FzfhimTqh84zOaoxeoXYf%2Fimage.png?alt=media\&token=f8078275-d4a4-4e31-be33-afb1b1103ab8)

{% embed url="<https://github.com/iceteagroup/wisej-extensions/tree/master/Wisej.Web.Ext.GoogleMaps>" %}
GoogleMaps Source Code
{% endembed %}

## Fe**atures**

* **Map Types**
  * Display the road, satellite, hybrid, terrain, and custom maps.
* **Localization**
  * Automatically localize text on the map into over 40 languages.
* **Markers**
  * Display the default Google Maps marker, or add your own custom-styled markers.
* **UI controls**
  * Customize the UI controls that appear on the map.
* **Events**
  * Write code that reacts to user interactions and lifecycle events.
* **Info windows**
  * Add increased context and information to your markers with interactive info windows.
* **Shapes**
  * Draw a variety of shapes on the map with built-in functions, including polylines and polygons.
* **Custom Overlays**
  * Create custom overlays to display data, imagery, and more on the map.
* **Ground Overlays**
  * Overlay your own custom imagery that stays in sync with the map when it pans and zooms.
* **Custom styling**
  * Custom style the appearance of almost every visual aspect of the map.
* **Tilt & Rotation**
  * Programmatically tilt and rotate the vector basemap in three dimensions.
* **Marker clustering**
  * Group large numbers of markers for a cleaner user experience.
* **Heatmaps**
  * Visualize the density of data at geographical points.

## How to Use

The **GoogleMaps** extension can be added to a Wisej.NET project using NuGet Package Manager.

{% embed url="<https://www.nuget.org/packages/Wisej-3-GoogleMaps>" %}

To use the GoogleMaps extension you first need to set the *ApiKey* to your Google Maps API key.\
Configure your GoogleMaps instance by specifying [MapOptions](https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions) in *Options* property.\
On initial load please set GoogleMapsURL if you don´t want to use the default (//m[aps.googleapis.com/maps/api/js](https://github.com/iceteagroup/wisej-docs-extensions/tree/8ad35dfc6ca5409347f6d34a90f66ff0006e7097/maps.googleapis.com/maps/api/js/README.md)). This setting cannot be changed after the component has been loaded the first time.

Add markers with the *AddMarker* methode or define routes with *AddRoute*. You can also use *ShowInfo* to show the Google Maps info window related to a marker.

```csharp
// Add a new marker
this.googleMap1.AddMarker("Marker1", "London SW1A 1AA, UK");
// Set the zoom via Options
this.googleMap1.Options.zoom = 10;
```

Feedback from the GoogleMaps is provided through events like *MapClick*, *MapPropertyChanged* or *MarkerDrag*\* and *MapDrag*\*

{% hint style="info" %}
Find more information in our GoogleMaps example in [C#](https://github.com/iceteagroup/wisej-examples/tree/master/GoogleMaps) or in [VB.NET](https://github.com/iceteagroup/wisej-examples-vb/tree/main/GoogleMaps).
{% endhint %}