# 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.

![](/files/tZy8eom11UIaiVHijJ91)

{% 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/extensions/extensions/googlemaps.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.