Home/ Questions/Q 8119689
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T04:52:26+00:00

I’m creating an asp.net page that uses the google map api. The page loads

  • 0

I’m creating an asp.net page that uses the google map api. The page loads GoogleMap.js in the head tag which contains the google map initialization stuff. And in the code behind, I’m injecting some more javascript code using Page.ClientScript.RegisterClientScriptBlock() (I’ve also tried RegisterStartupScript()). This function places the additional injected code in a script block inside the body tag (below the GoogleMap.js script). I’m using the Chrome developer window to debug my javascript, now when I throw in some break points to check the execution sequence, the script block in the body gets executed before the script in the head. So it’s NOT going in sequence from top of the HTML page to the bottom like I thought it should. What’s going on??? And how can I fix it? And for the sake of organization, I’d like to not use RegisterClientScriptBlock() for every piece of javascript in my page.

The issue is that the body tag executes first, and since the “map” variable hasn’t been assigned with a Google map whatever object, the markers don’t get added.

Here’s some code of what asp.net produces and returns to the client browser…

</title><link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" /><link href="../css/master.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>




    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>



    <script type="text/javascript">
        var map;

        function initialize() {
            var chicago = new google.maps.LatLng(41.879535, -87.624333);

            var mapOptions = {
                zoom: 4,
                center: chicago,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

            var marker = new google.maps.Marker({
                position: chicago,
                map: map,
                title: "Hello World!"
            });

            $('#Debug').html(CountryDropDownList.children("option").filter(":selected").text().trim());
        }

        $(document).ready(function() {
            initialize();
        });
    </script>

    <script src="SearchTabs.js" type="text/javascript"></script>

    <!--[if gte IE 9]>
    <style type="text/css">
    .gradient {
       filter: none;
    }
    </style>
    <![endif]-->
<style type="text/css">
    .ctl00_MainMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
    .ctl00_MainMenu_1 { text-decoration:none; }
    .ctl00_MainMenu_2 {  }
    .ctl00_MainMenu_3 { font-size:12pt; }
    .ctl00_MainMenu_4 { padding:0px 10px 0px 10px; }

</style></head>
<body>
    <form name="aspnetForm" method="post" action="HertzMap.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="VIEWSTATE_CRAP" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script type="text/javascript">
var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(41.79068,-77.26577),
    map: map,
    title: "WHEEL LOADER/3YD/GEN BKT/DSL            "
});
var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(41.72962,-76.12181),
    map: map,
    title: "CRAWLER LOADER/3/4 YD/GENERAL/DSL       "
});
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looking at:

    $(document).ready(function() {
    initialize();
});

    means that jQuery will delay the execution of initialize until the document has been fully loaded.

    However, if you put code just inside script element, it will be executed right away. This is exactly what you are now doing with the markers: they are initialized, before the actual map object is available, which leads to undesirable results.

    Try calling the script initialization either in the end of the initialize or after it calling it inside $(document).ready.

    • 0