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.

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.

• javascript
• c#
• google-maps
• updatepanel
• registerstartupscript

Share Improve this question Follow asked May 4, 2017 at 11:46 Ivan Ben KerIvan Ben Ker 1311 gold badge11 silver badge44 bronze badges 4

• 1 Can you update the example to show the Google API libraries you are loading? – laylarenee Commented May 4, 2017 at 11:51
• I using only this. <script src="//code.jquery./jquery-1.10.2.js"></script> <script src="maps.googleapis./maps/api/js?key=MY_KEY"></script> – Ivan Ben Ker Commented May 4, 2017 at 11:56
• That might be the problem. Do you have a JavaScript error that "google is not defined"? – laylarenee Commented May 4, 2017 at 11:57
• No actually. If i place "<div style="height: 60%;" id="map"></div>" in the form tag but outside of the updatepanel, the map shows. However, considering my future plans to have the submit button on click event move the map to the specified location, i would think that having this inside the updatepanel is more ideal? – Ivan Ben Ker Commented May 4, 2017 at 12:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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./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