Provide example for place.AddressComponents

[MSIH]

I am new to programming and can not figure out how to get the Address component information. Could you please provide an example for the street address?

Here is the javascript example from the google dev web site.

// Get each component of the address from the place details,
        // and then fill-in the corresponding field on the form.
        // place.address_components are google.maps.GeocoderAddressComponent objects
        // which are documented at http://goo.gle/3l5i5Mr
        if (place) {
            for (const component of place.address_components) {
                const componentType = component.types[0];

                switch (componentType) {
                    case "street_number":
                        {
                            address1 = `${component.long_name} ${address1}`;
                            break;
                        }

                    case "route":
                        {
                            address1 += component.short_name;
                            break;
                        }

                    case "postal_code":
                        {
                            postcode = `${component.long_name}${postcode}`;
                            break;
                        }

                    case "postal_code_suffix":
                        {
                            postcode = `${postcode}-${component.long_name}`;
                            break;
                        }
                    case "locality":
                        document.querySelector("#locality").value = component.long_name;
                        break;

                    case "administrative_area_level_1":
                        {
                            document.querySelector("#state").value = component.short_name;
                            break;
                        }
                    case "country":
                        document.querySelector("#country").value = component.long_name;
                        break;
                }
            }

[valentasm1]

You could check server side demos https://github.com/rungwiroon/BlazorGoogleMaps/tree/master/ServerSideDemo/Pages

Probably you need https://github.com/rungwiroon/BlazorGoogleMaps/blob/master/ServerSideDemo/Pages/MapAutocomplete.razor

Also i dont think this is GoogleMap component. I think you need https://github.com/chadly/Geocoding.net

[MSIH]

I have already reviewed the page for the demo of autocomplete but does not use show how to access the content of the place.AddressComponents object.

[valentasm1]

What use case are you trying to solve?

[MSIH]

I am trying to create a form for people to enter their address. users enter their address in the google place autocomplete form and populates other fields for with street, city, state, postal code. See google example/demo https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

[valentasm1]

I see all required info to fill form in MapAutocomplete component place object have all fields. Try to debug ServerSideDemo and you will see by yourself.

await this.autocomplete.AddListener("place_changed", async () =>
        {
            var place = await this.autocomplete.GetPlace();

            if (place?.Geometry == null)
            {
                this.message = "No results available for " + place?.Name;
            }
            else if (place.Geometry.Location != null)
            {
                await this.map1.InteropObject.SetCenter(place.Geometry.Location);
                await this.map1.InteropObject.SetZoom(13);

                var marker = await Marker.CreateAsync(this.map1.JsRuntime, new MarkerOptions
                {
                    Position = place.Geometry.Location,
                    Map = this.map1.InteropObject,
                    Title = place.Name
                });

                this.markers.Push(marker);

                this.message = "Displaying result for " + place.Name;
            }
            else if (place.Geometry.Viewport != null)
            {
                await this.map1.InteropObject.FitBounds(place.Geometry.Viewport, 5);
                this.message = "Displaying result for " + place.Name;
            }

            this.StateHasChanged();
        });

[MSIH]

Thanks but I am not interested in debugging. I was hoping for an example of how to access the place.AddressComponents from this library.

[valentasm1]

Sorry but i dont do programing for you. I almost sure you could find all required info in that component example In other hand drop me email and you could hire me if you want and i will give exact working page