Geek Answers Handbook

Google Maps API 3 How to call initialization without putting it in Body onload

I use the google maps API and copied the examples and eventually got the "initialize" function, which is called from the onload body.

I use maps in several user controls that fit into content holders, so the body tag is on the main page.

Is there a way to invoke initialization directly in usercontrol instead of posting onload on the main page? Ideally, I want my user control to be a standalone control that I can simply stack on pages without trying to access the main content of the page.

I tried calling the Initialize function from the load page of the user control (by adding a script start), but the map does not appear.

Any suggestions?

My code is:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">/script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var map;
var geocoder;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(51.8052184317649, -4.965819906250006);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    $.ajax({
        type: "POST",
        url: "/GoogleMapsService.asmx/GetPointers",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        beforeSend: function () {
            $(".loadingData").html("<p>Loading data..</p>");
        },
        complete: function () {
            $(".loadingData").html("");
        },
        cache: true,
        success: mapPoints,
        error: onError
    });
}
function onError(xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(xhr.responseText);
}
function mapPoints(response) {

    if (response.d != null) {
        if (response.d.length > 0) {
            for (var i = 0; i < response.d.length; i++) {

                plotOnMap(response.d[i].Id, response.d[i].Name,
                    response.d[i].Lat, response.d[i].Long,
                    response.d[i].ShortDesc)

            }
        }

    }
}

and on my main test page:

<body onload="initialize()">
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
+5
source share
2 answers

Thanks for the answer, but I finally did it like this:

<script type="text/javascript">
    window.onload = function () {
        initialize();
    }
</script>
+2
source

Here is how I do it: (you can use this script in usercontrol)

<script type="text/javascript">

          $(document).ready(function() {
            if ($('#map_canvas').length != 0) {
            //google map stuff here
          }
      });
    </script>
+1
source

More articles:


All Articles