BlazorGoogleMapsV3-New 1.2.0

BlazorGoogleMapsV3-New

Blazor Implementation for Google Maps V3 JavaScript SDK

I originally created this when I worked for another company under the package name BlazorGoogleMapsV3. I lost access to the nuget account that it was uploaded under when I left and so I will continue to maintain that project here under a personal account to prevent the same thing from happening in the future. The package name has changed but the assembly name and everything else has stayed the same. You will likely need to remove the previous package and reinstall the new package to avoid assembly name conflicts. But you shouldn't need to change any of your code to accomodate the new package name.

Getting Started

1. Add the Nuget package to your project
   • PM> Install-Package BlazorGoogleMapsV3-New -Version 1.2.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

Release Notes

Version 1.2.0

1. Fix for setting MapOptions.
   1. The Map would not initialize if you set the MapOptions, so a new method was added to the <Map> component called SetOptions that takes an object type as a parameter and will set the options.
2. Added more methods for adjusting and moving the map.
   1. Added the following methods:
      1. public async void MoveCamera(MapCameraOptions options)
      2. public async void SetCenter(MapLatLng center)
      3. public async Task<MapLatLng> GetCenter()
      4. public async void SetHeading(double heading)
      5. public async void SetTilt(double tilt)
      6. public async void SetZoom(double zoom)
      7. public async void PanBy(double x, double y)
      8. public async void PanTo(MapLatLng position)