How to show google maps in ASP.NET C#

Question

I am working on adding the google maps control into an ASP.NET C# page. I have gotten the API key from google and I was just testing the page out but it seems that the map is not showing. And my end result is to have inputs using textboxes for Latitude and longitude and upon clicking the submit button, the map brings me to the specified location. On the frontend, I have this:

<script>
    var map;
    function initialize() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(48.1293954, 11.556663), // Munich Germany
            zoom: 10
        });
    }

    function newLocation(newLat, newLng) {
        map.setCenter({
            lat: newLat,
            lng: newLng
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<form id="form1" runat="server">
    <asp:ScriptManager ID="sManager" runat="server" />
    <asp:UpdatePanel ID="pnlTest" runat="server">
        <ContentTemplate>
            <div style="height: 60%;" id="map"></div>

            <asp:TextBox ID="txtLat" runat="server" />
            <asp:TextBox ID="txtLong" runat="server" />
            <asp:Button ID="btnSubmit" Text="Submit" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

I have not done the button click event because i want to get the above up first.

Answer 1

The problem is that your UpdatePanel has no height when the map is rendered. If you specify a height for your control, the map will be visible:

<asp:UpdatePanel ID="pnlTest" runat="server" style="height:400px;">

The Google documentation says you must set a height explicitly:

Note that divs usually take their width from their containing element, and empty divs usually have 0 height. For this reason, you must always set a height on the div explicitly.

Answer 2

In my case, I was trying to show the map inside a Modal Popup dialog inside an Update Panel. tricky!

This was the solution:

• In the aspx form (inside the modal popup panel) I added one div like this

  <div id="map" style="width: 600px; height: 400px; margin-right: auto; margin-left: auto;"></div>
  

• In the aspx form also, but after the update panel I added the following script:

  <script src="https://maps.googleapis.com/maps/api/js?key=(YOUR_API_KEY_Here)&sensor=false"></script>
  

• And Another Script:

  <script type="text/javascript">
  var map;
  function RenderTheMap(lat, long) {
      map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(lat, long), 
          zoom: 9
      });
  
      var latlng = new google.maps.LatLng(lat, long);
      new google.maps.Marker({
          position: latlng,
          map: map
      });
  }        
  

• In the c# code behind I added the following function:

  private void ShowMap(string Address_Lat, string Address_Long)
  {
      ScriptManager.RegisterStartupScript(
      UpdatePanel1,
      this.GetType(),
      "RenderMap",
      "RenderTheMap(" + Address_Lat + ", " + Address_Long + ");",
      true);
      MapPanel_ModalPopupExtender.Show();
  }
  

For anybody wants to add Google Maps as a Popup module inside an Update Panel