Proper way to include Google Maps in .Net Core?
<p>I have a .Net Core application and in one of my views I want to have a Google Map in which I want to be able to draw dynamical polylines.</p>
<h1>Index.cshtml</h1>
<p>I have included a Google Map on my view as follows:</p>
<pre><code>&lt;div class=&quot;col-md-6 col-lg-6&quot;&gt;
    &lt;h3&gt;My Google Maps Demo&lt;/h3&gt;
    &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
  function initMap() {
    var center = { lat: 55.92965249, lng: 12.47840507 };
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: uluru
    });
  
    $.get()
    $.post()

    route.setMap(map);
  }
&lt;/script&gt;
</code></pre>
<p>And in my _Layout.cshtml I have:</p>
<pre><code>&lt;script async defer
    src=&quot;https://maps.googleapis.com/maps/api/js?key=...api key...&amp;callback=initMap&quot;&gt;
&lt;/script&gt;
</code></pre>
<p>All of this works as intended, but I am unsure of whether this is the proper way to show Google Maps in a .Net Core application?</p>
<p>Furthermore I want to be able to draw dynamical routes in my Google Maps implementation. This is done via the following code</p>
<pre><code>var route = new google.maps.Polyline({
    path: routeCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});
</code></pre>
<p>where routeCoordinates is a list of coordinates:</p>
<pre><code>var routeCoordinates = [
    {lat: 55.92965249, lng: 12.47840507},
    {lat: 55.92941392, lng: 12.47832253},
    {lat: 55.92918626, lng: 12.47824027},
    ...
    {lat: 55.91474539, lng: 12.47145191},
    {lat: 55.91450191, lng: 12.47139283},
    {lat: 55.91425197, lng: 12.47134614}
]
</code></pre>
<p>All the above is of course done statically in my <strong>Index.cshtml</strong>.</p>
<p>So is there a better way to do this? And how would I go about adding and removing lines dynamically (hopefully) by using my Controller? I expect something like:</p>
<pre><code>public async Task&lt;IActionResult&gt; Index()
{
    return View(await _context.Trips.ToListAsync());
    //context is my db
}
</code></pre>
<p>Right now it is not present but I will be getting a list of coordinates from my context through my EF implementation.</p>
<h1>EDIT:</h1>
<p>Since I posted this I have continued a bit, and I now have a PartialView that I want to load when clicking a table row:</p>
<h3>MapPartialView.cshtml</h3>
<pre><code>@model IEnumerable&lt;LngLat&gt;

&lt;div class=&quot;col-md-6 col-lg-6&quot;&gt;
    &lt;h3&gt;My Google Maps Demo&lt;/h3&gt;
    &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    function initMap() {
        var center = { lat: 55.92965249, lng: 12.47840507 };
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: center
        });

        //$.get();
        //$.post();

        routeCoordinates = @Model;

        var route = new google.maps.Polyline({
            path: routeCoordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        route.setMap(map);
    }
&lt;/script&gt;
</code></pre>
<p>And my:</p>
<h3>Index.cshtml</h3>
<pre><code>// table header and so forth..
&lt;tbody&gt;
    @foreach (var item in Model)
    {
        &lt;tr class=&quot;trips&quot; data-id=&quot;@item.TripID&quot; data-url=&quot;@Url.Action(&quot;ExpandMap&quot;, &quot;Trip&quot;)&quot;&gt;
            &lt;td&gt;
                @Html.DisplayFor(modelItem =&gt; item.DeviceID)
            &lt;/td&gt;
            &lt;td&gt;
                @Html.DisplayFor(modelItem =&gt; item.StartTime)
            &lt;/td&gt;
            &lt;td&gt;
                @Html.DisplayFor(modelItem =&gt; item.Duration)
            &lt;/td&gt;
            &lt;td&gt;
                @Html.DisplayFor(modelItem =&gt; item.StartLocation)
            &lt;/td&gt;
            &lt;td&gt;
                @Html.DisplayFor(modelItem =&gt; item.EndLocation)
            &lt;/td&gt;
        &lt;/tr&gt;
    }
&lt;/tbody&gt;

&lt;div id=&quot;partialMap&quot;&gt;&lt;/div&gt;
</code></pre>
<p>And in my:</p>
<h3>site.js</h3>
<pre><code>$('.trips').each(function (i, e) {
    var _this = $(this);
    var element = $(e).children('td');
    element.click(function () {
        //console.log(&quot;Clicked! &quot; + _this.data('url') + &quot; &quot; + _this.data('id'));
        $(&quot;#partialMap&quot;).load(_this.data('url'), { id: _this.data('id') }, function () {
            $(&quot;#partialMap&quot;).slideDown('200');
        });
    });
    
});
</code></pre>
<p>And lastly my controller and the ExpandMap function:</p>
<h3>TripController.cs</h3>
<pre><code>public IActionResult ExpandMap(int id)
{
    var trip = _context.Trips.SingleOrDefault(t =&gt; t.TripID == id);

    List&lt;LngLat&gt; routeCoordinates = new List&lt;LngLat&gt;
    {
        new LngLat() { lat = 55.92965249, lng = 12.47840507},
        new LngLat() { lat = 55.92941392, lng = 12.47832253},
        ...
        new LngLat() { lat = 55.91450191, lng = 12.47139283},
        new LngLat() { lat = 55.91425197, lng = 12.47134614}
    };

    string routeCoordinatesJS = JsonConvert.SerializeObject(routeCoordinates, Formatting.None, new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore });

    return PartialView(&quot;MapPartialView&quot;, routeCoordinatesJS);
}
</code></pre>
<p>But when I run the code I get a:</p>
<pre><code>Failed to load resource: the server responded with a status of 500 (Internal Server Error)
</code></pre>