CODEWITHSUNDEEP
javascriptc#google-maps-markers
OriBr
OriBr

Reputation: 324

How to use javaScript library in c# code

I'm working on my web project using MVC 4

I'm trying to access my Suppliers data to mark locations in Google Maps.

public ActionResult GoogleMaps()
{
    var dbContext = new VicoProject___NewVersion.DAL.MakeUpContext();
    ViewBag.supliersContext = dbContext.Supplier.ToArray();
    eturn View();
}

The code above is in my HomeController

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-key">
</script>
<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: { lat: 32.071953, lng: 34.787868 },
            zoom: 8
            };

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        @Html.Raw(ViewBag.HTTML)

        @foreach (var c in ViewBag.supliersContext)
        {
            var supplierAddress = c.SupplierAddress;
            var suplierName = c.SupplierName;
            var supplierLat = c.SupplierLatitude;
            var supplierLng = c.SupplierLongitude;
            // cant use the google.maps :(:(
            var marker = new google.maps.Marker({
                position: google.maps.LatLng(supplierLat,supplierLng);
                map: map,
                title: suplierName
            });
        }
     }
    window.onload = initialize;
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

the code above is in my GoogleMaps viewe

i need some how that me loop will recognize the google.maps

thanks

Edit

Ok so I have changed my loop to a JavaScript loop

for (var i = 0 ; i < ViewBag.supliersContext.length ; i++) {
    var supplierAddress = c.SupplierAddress;
    var suplierName = c.SupplierName;
    var supplierLat = c.SupplierLatitude;
    var supplierLng = c.SupplierLongitude;

    var marker = new google.maps.Marker({
        position: google.maps.LatLng(supplierLat, supplierLng),
        map: map,
        title: suplierName,
    })
 }

But still no markers :(

Upvotes: 2

Views: 4378

Answers (1)

Vladimirs
Vladimirs

Reputation: 8609

JavaScript isn't a server-side language so you can't use its objects within your C# context.

Based on your code you can generate string with JavaScript and fill that with values retrieved from your controller, something like that within your @foreach loop:

@(String.Format("new google.maps.Marker({{position: new google.maps.LatLng({0},{1}), map: map, title: {2}    }});", supplierLat, supplierLng, suplierName))

So basically that will output google.maps.Marker instances per each iteration that you can format however you'd want, depending on how you are going to use that.

Update:

This is a working example.

Server-side:

public class Supplier
{
    public string SupplierName { get; set; }
    public decimal SupplierLatitude { get; set; }
    public decimal SupplierLongitude { get; set; }
}

[HttpGet]
public ActionResult Index()
{
    ViewBag.supliersContext = new List<Supplier>()
    {
        new Supplier() { SupplierName = "Test1", SupplierLatitude = 32.071953M, SupplierLongitude = 34.787868M },
        new Supplier() { SupplierName = "Test2", SupplierLatitude = 31.571953M, SupplierLongitude = 34.787868M },
        new Supplier() { SupplierName = "Test3", SupplierLatitude = 31.071953M, SupplierLongitude = 34.787868M },
    };
    return View();
}

Client-side:

<html lang="en">        
    <body>
        <div id="map-canvas" style="height: 400px;"></div>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
        <script type="text/javascript">
            function initialize() {
                var mapOptions = {
                    center: { lat: 32.071953, lng: 34.787868 },
                    zoom: 8
                };
                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                @foreach (var c in ViewBag.supliersContext)
                {
                    var suplierName = c.SupplierName;
                    var supplierLat = c.SupplierLatitude;
                    var supplierLng = c.SupplierLongitude;
                    @Html.Raw(String.Format("new google.maps.Marker({{position: new google.maps.LatLng({0},{1}), map: map, title: '{2}'}});", supplierLat, supplierLng, suplierName))
                }

            }
            window.onload = initialize;
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </body>
</html>

This is only a test example and you shouldn't use it right away, because @Html.Raw reveals XSS vulnerability in that context.

Upvotes: 2

Related Questions