Google Map API on MVC5

I'm having problem when trying to produce multiple marker for multiple address on the map. So basically, I'm pulling the address from my database and let the GoogleLocationService() to detect the coordinates of it. Though I'm not sure how can i pass multiple latitue and longitude for my VIEW(.CSHTML). I'm still new on MVC so I'm kinda having trouble on passing the values from controller to view. any suggestions?

On my Code (Controller) :

   public ActionResult Index() {

        VerifyUserModel user = new VerifyUserModel();
        user.UserName = "Kenneth Baleda";
        user.AccountLevel = "MGR";

        foreach (string w in a.Companies.Where(x => x.IsActive == "Active").Where(x => x.CompanyName != "tbd").Where(x => x.FullCompanyName != "Test")
                    .Where(x => x.FullCompanyName != "")
                    .Select(x => x.Address).ToArray())
        {
            user.CompanyAddress = w;
            var location = new GoogleLocationService();
            var point = location.GetLatLongFromAddress(w);

            user.Latitude = point.Latitude;
            user.Longtitude = point.Longitude;
        }

            return View(user);
    }

While on my (Model) :

    public class VerifyUserModel 
    {
    public string UserName { get; set; }

    public string AccountLevel { get; set; }

    public double Latitude { get; set; }

    public double Longtitude { get; set; }

    public string CompanyAddress { get; set; }
}

Then my (.CSHTML) :

@foreach (var place in Model) { var latlng = new google.maps.LatLng(@Model.Latitude, @Model.Longtitude); var marker = new google.maps.Marker({ position: latlng, map: map, title: 'Latitude: ' + latlng.Ya + ' Longitude :' + latlng.Za, draggable: true, icon: image }); infoWindow = new google.maps.InfoWindow({ content:"-- Test Address --" }); infoWindow.open(map, marker); geocoder = new google.maps.Geocoder(); //Update postal address when the marker is dragged google.maps.event.addListener(marker, 'click', function () { //dragend geocoder.geocode({ latLng: marker.getPosition() }, function (responses) { if (responses && responses.length > 0) { infoWindow.setContent( "" + responses[0].formatted_address + "
" + "Latitude: " + marker.getPosition().lat() + "&nbsp" + "Longitude: " + marker.getPosition().lng() + "" ); infoWindow.open(map, marker); } else { alert('Error: Google Maps could not determine the address of this location.'); } }); map.panTo(marker.getPosition()); }); // Close the marker window when being dragged google.maps.event.addListener(marker, 'dragstart', function () { infoWindow.close(map, marker); }); }

链接地址: http://www.djcxy.com/p/96194.html

上一篇: Google地图自定义叠加点击事件

下一篇: MVC5上的Google Map API