Googlemap control for Asp.Net MVC

Geocode

About this example

This example shows how to load markers using the Google Geocoding Services and Googlemap control for Asp.Net MVC.

To enabled the use of the Geocoding Serviece you will need to explicitly set the MarkersGeocoding to true.

You cannot mix markers using geocoding and markers using Latitude and Logitude in the same map.

Notice that the Googlemap control for Asp.Net MVC will rise an event when the Markers Geocoding is completed. You can subscribe to that event using the Map Client Event "OnMarkersGeocodingCompleted"

Googlemap control for Asp.Net MVC will also rise an event ("OnMarkersGeocodingProgress") you can subcribe to, in order to show progress on loading markers from Geocoding.

Be aware of the Google Geocoding Services API limits

    @{
    Html.GoogleMap()
        .Name("map")
        .Height(600)
        .Center(c => c.Latitude(40)
                      .Longitude(-3))
        .ClientEvents(e =>
            e.OnMarkersGeocodingCompleted("MarkerFromAddressCompleted")
             .OnMarkersGeocodingProgress("OnProgress")
        )
        .MarkersGeocoding(true)                      
        .BindTo<RegionInfo, Marker>
        (Model, mappings => mappings.For<RegionInfo>
            (
                binding => binding.ItemDataBound
                    (
                        (marker, regionInfo) =>
                        {
                            marker.Address = regionInfo.Address;
                            marker.Title = regionInfo.Title;
                            marker.zIndex = regionInfo.zIndex;
                            marker.Window = new InfoWindow(marker)
                            {
                                Template =
                                {
                                    Html = regionInfo.InfoWindowContent
                                }
                            };
                        }
                    )
            )
        )
        .Render();
}

@section Scripts{
    <script type="text/javascript">
        function MarkerFromAddressCompleted(args) {
            alert("Load markers using Geocoding completed !!!");
        }
        function OnProgress(args) {
            alert("Progress Percentage = " + args.value);

            if (args.status !== google.maps.GeocoderStatus.OK) {
                alert("Error loading address " + args.address + ". Reason: " + args.status);
            }
        }
    </script>
}