title: Proper way to include Google Maps in .Net Core?
body: <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>