locked
Need to call a c# function from a script async render src RRS feed

  • Question

  • User-966203648 posted

    Hello

    I have this script in a aspx page

        <script

            src="https://maps.googleapis.com/maps/api/js?key=" + "<%=LeerWebKey() %>" + "&callback=initMap">

        </script>

    And in aspx.cs code file I have

        public string LeerWebKey()

        {

            return (string)Session["GoogleMaps_WebKey"];

        }

    Works fine, I can see my map

    But I need to make the script async defer

        <script async defer

            src="https://maps.googleapis.com/maps/api/js?key=" + "<%=LeerWebKey() %>" + "&callback=initMap">

        </script>

    I cannot see the map

    Any ideas?

    Regards

    Rubenc

    Tuesday, January 29, 2019 12:46 AM

Answers

  • User-966203648 posted

    Hello Ackerly Xu

    I solved it by doing this:

        <script>
             var webKey = GetWebKey();
             document.write("<script async defer src='https://maps.googleapis.com/maps/api/js?key=" + webKey + "&callback=initMap'><\/script>");
         </script>

    Regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 29, 2019 5:00 PM

All replies

  • User-893317190 posted

    Hi rubenc,

    According to the google map's hello world tutorial, the google map script will call your initMap callback after it is loaded.

    Here is its initMap function, you could see it uses a html element  with the id map.

    <script>
          var map;
          function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: -34.397, lng: 150.644},
              zoom: 8
            });
          }
        </script>

    If your  map element hasn't been loaded when google map calls your initMap function, it couldn't find the element map, which is why you could not find your map.

    So please ensure your map element has been loaded when the map api calls your callback.

    An easy way is that you could  use  google tutorial's  structure, please ensure  <div id="map"></div> is in front of your script.

     <body>
        <div id="map"></div>
        <script>
          var map;
          function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: -34.397, lng: 150.644},
              zoom: 8
            });
          }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
        async defer></script>
      </body>

    Another way is to only use defer and remove async, script marked as defer will execute after all the dom elements are loaded.

    Best regards,

    Ackerly Xu

    Tuesday, January 29, 2019 2:02 AM
  • User-966203648 posted

    Hello Ackerly Xu

    I solved it by doing this:

        <script>
             var webKey = GetWebKey();
             document.write("<script async defer src='https://maps.googleapis.com/maps/api/js?key=" + webKey + "&callback=initMap'><\/script>");
         </script>

    Regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 29, 2019 5:00 PM