BlazorGoogleMapsV3 1.1.0

BlazorGoogleMapsV3

Blazor Implementation for Google Maps V3 JavaScript SDK

Getting Started

1. Add the Nuget package to your project
   • PM> Install-Package BlazorGoogleMapsV3 -Version 1.1.0
2. After adding the Nuget Package to your solution, add the following <script> tags to your index.html or _host.cshtml
   • <script src="https://maps.googleapis.com/maps/api/js?key={YOUR_KEY_HERE}&libraries=drawing,geometry"></script>
   • It is recommended to add the drawing and geometry libraries as many of these features are implemented in this component.
   • <script src="_content/BlazorGoogleMapsV3/JS/map.js"></script>
3. In your _imports.razor file add the following using directives:
   • @using BlazorGoogleMapsV3.Components
   • @using BlazorGoogleMapsV3.Models

Creating The Map

1. Add the following component tag wherever you want to provide a map. <Map></Map>
2. The <Map> Component requires an Id by providing the MapId="{Map Id Here}" attribute. This should be a unique identifier and allows you to place multiple <Map> components on the same page at a time.
   1. The <Map> component will fill the available space in its container. If you wish to keep it to a specific size, enclose it in a <div> element set to the desired size.
3. It is recommended to create a Map reference in your blazor code to perform any operations against the map instance.
   1. (ie. <Map @ref="MapItem"> and then in your code private Map MapItem { get; set; })
4. The following table describes the events that can be subscribed to on the Map instance and their argument types. Note that many of these events are fired when map elements are interacted with, such as a map marker, however all of these events are subscribed to via the Map component, and the relevant map elements are returned within the event arguments.
   1. More in depth documentation is given about these events in Google's official documentation Here
5. To initialize the map to start at a specific location, you need to provide the MapOptions to the Map component. This Map component accepts an object type for the MapOptions so that you can provide your own implementation of the options. As long as you follow the same structure as is outlined in the official Google documentation (link provided in the previous step), then you shouldn't have any issues. However I have created a class called MapOptions that you can use. It has several commonly used values by default, but they can be reassigned however you would like. If you would like to programatically move the map to an new location, simply create a new instance of the MapOptions and assign it to the Map reference's MapOptions property.
   1. An example of creating your own MapOptions could look something like this:
   2. var _mapOptions = new { center = new MapLatLng { lat = 41.739081, lng = -111.834756 }, zoom = 15, tilt = 0 };
   3. Then assign this to the Map reference and you should be good to go.

Map Events

Marker Events

Polygon Events

Polyline Events

Rectangle Events

Circle Events

Info Window Events