title: Launch Google Maps On Blazor
body: <p>I am trying to launch Google maps on my Server side Blazor app using JSInterop. I seem to have tried just about everything but can't get the map to show. Unfortunately there is very little samples if any about it on the internet since it's a fairly new framework and I am equally just getting my feet wet on Blazor myself, so I am probably doing a whole lot of things wrong. Any nudge in the right direction would be appreciated.</p>
  
  <p>In my component file, I have:</p>
  
  <pre><code>@page "/MapTest"
  @inject IJSRuntime JSRuntime
  
  &lt;style&gt;
      #map {
          width: 60%;
          height: 60%;
      }
  &lt;/style&gt;
  
  &lt;h1&gt;Display Google Map&lt;/h1&gt;
  
  
  &lt;div @ref="map" id="map"&gt;&lt;/div&gt;
  
  @code {
  
      ElementReference map; // reference to the DIV
  
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
          await JSRuntime.InvokeVoidAsync("Showgooglemap", null);
          //StateHasChanged();
  
      }
  }
  </code></pre>
  
  <p>On my _Host.cshtml file, I have:</p>
  
  <pre><code>   &lt;script src="_framework/blazor.server.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxmykeyxxx&amp;v=3"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
              function initialize() {
                  var latlng = new google.maps.LatLng(40.716948, -74.003563);
                  var options = {
                      zoom: 14, center: latlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                  };
                  var map = new google.maps.Map(document.getElementById
                      ("map"), options);
          }
              //google.maps.event.addDomListener(window, 'load', initialize);
  
  //i tried wrapping the call in a function to see if it helps
          function Showgooglemap() {
              google.maps.event.addDomListener(window, 'load', initialize);
          }
        &lt;/script&gt;
  </code></pre>