similiar case as Toggle Layers #107

[sjafarianm]

Hi I have a same scenario as This Issue and i want to use "PartialView with Ajax" (server side toggling) , the problem is that i can load a map with a simple marker just like the sample, but when i use a code that is similar as markers clustering binding(passing a model from controller and bind the markers to that) it throws an error that i cant bind a dynamic field with the lambda expression which is reasonable, So how can i bind the multiple markers retrieved from API to the view?

[jmelosegui]

Could you share the code you are using?

[sjafarianm]

@jmelosegui
the code is ok when i bind the model with the "model IEnumerable", but i don`t know what to do when i use Web API in order to filter markers.

@model IEnumerable Html.GoogleMap() .Name("map") .Height(662).MaxZoom(8) .StyledMapTypes(map => map.Add() .Styles(style => { style.Add() .HueColor(Color.Khaki) .Visibility(MapTypeStylerVisibility.Simplified) .Gamma(0.3F) .Weight(0.5F);

                      style.Add()
                          .ElementType(ElementType.Labels)
                          .Visibility(MapTypeStylerVisibility.Simplified);

                      style.Add()
                          .FeatureType(FeatureType.Water)
                          .Color(Color.SteelBlue);
                      style.Add()
                         .FeatureType(FeatureType.PoiPark)
                         .Color(Color.ForestGreen);

                  })
                  .MapTypeName("Custom Style")
           )
           .MapTypeId("Custom Style")

               .MinZoom(2).Zoom(2).StreetViewControlVisible(false).Center(c => c.Latitude(33.177899)
    .Longitude(54.824940))
       .EnableMarkersClustering(options =>
       {
           options.GridSize = 20;
           options.AverageCenter = true;
           options.ZoomOnClick = true;
           options.HideSingleGroupMarker = true;
           options.CustomStyles(style => style.Add().ImageUrl(HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority) + HttpRuntime.AppDomainAppVirtualPath + "Content/img/mapicon1.png")
                                   .Height(35).Width(35).FontSize(12).FontColor(Color.White));
       })
       .BindTo<eventsClass, Jmelosegui.Mvc.GoogleMap.Marker>
                   (Model, mappings => mappings.For<eventsClass>
                       (
                       binding => binding.ItemDataBound
                       (
                       (marker, obj) =>
                       {
                           marker.Title = obj.name;
                           marker.Latitude = obj.latitude;
                           marker.Longitude = obj.longitude;

}

                       )
           ))
                               .Render();

[jmelosegui]

This control does not support WebApi, it is all about MVC. The closest feature to WebApi is the PartialView with Ajax

[sjafarianm]

I Know, as i mentioned in my question, i can draw a simple marker by this code:

@section scripts { @(Html.GoogleMap() .ScriptRegistrar(scripts => scripts.Add("jmelosegui.googlemap.js")) )

<script type='text/javascript'>
    $('#myButton').click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        new $.jmelosegui.GoogleMap('#mapContainer').ajax({
            url: '@Url.Action("GooglemapPartialView", "Home")',
            type: "Get",
            data: { payload: 'from ajax call' },
            success: function (data) {
                //alert('succeded');
            }
        });
    });
</script>

}

and

@using Jmelosegui.Mvc.GoogleMap

@{ Html.GoogleMap() .Name("map") .Markers(marker => marker.Add() .Window(w => w.Add() .Content((o) => String.Format("Hello PartialView {0}", Model)))) .Render(); }

@(Html.GoogleMap()
      .ScriptRegistrar())
)

but, what should i do for multiple markers with clustering like the code in the last comment of mine.

[sjafarianm]

actually PartialView with Ajax in your website is just for a single marker, could you give me an example for multiple markers with clustering enabled?

[jmelosegui]

Let's do this the other way.

1. You create a sample project here in Github trying to accomplish your scenario.
2. I will clone it and fix it, by adding whatever it is not clear in the docs.

[sjafarianm]

Ok, i will do it in 2 or 3 days (I am really busy right now), then i will comment here to let you know. do you think it is possible to do this with your library anyway? I know with JQuery based google map it can be done.

[jmelosegui]

Feel free to reopen this if it is still an issue for you