Googlemap control for Asp.Net MVC

External Reference

  • Andalucia
  • Aragón
  • Asturias
  • Cantabria
  • Castilla y León
  • Castilla La Mancha
  • Cataluña
  • Comunidad Valenciana
  • Extremadura
  • Galicia
  • Islas Baleares
  • Islas Canarias
  • La Rioja
  • Madrid
  • Murcia
  • Navarra
  • País Vasco

About this example

This sample show how to reference markers from outside the google map. Click on the items of the right list of Spanish regions to see the results.

To get the reference to the marker collection you will need to subcribe to the "OnMapLoaded" map client event.

@(
    Html.Googlemap()
        .Name("map")
        .Markers(m => m.Add()
                       .Id("marker-1")
                       .Title("Hello World!"))
        .ClientEvents(events => events.OnMapLoaded("onMapLoadHandler")) 
 )

<ul class="marker-list">
    <li data-id="marker-1">My Marker</li>
</ul>

Then you could write an script such as the following.

<script type="text/javascript">
        var markers = {};
        function onMapLoadHandler(args) {
            markers = args.markers;
        }
         const makerlist = document.querySelectorAll(".marker-list li");
        
        Array.prototype.forEach.call(makerlist, function (el, i) {
            el.addEventListener('click', function (e) {
                var id = e.currentTarget.dataset.id; //attr('data-id');
                google.maps.event.trigger(markers[id], 'click');
            }, false);
        });
</script>

Note that the Id property of the GoogleMap Control for Asp.Net Marker will be used to access to the items in the marker "dictionary"

If you do not set the Marker Id property in the GoogleMap Mvc Helper the index of the marker inside the collection will be used instead.

If you use Google Geocoding service to load markers in the map. The event you will have to subscribe to must be "OnMarkersGeocodingCompleted"