Google Maps API 3 How to call initialize without putting it in Body onload
Posted
by
Bex
on Stack Overflow
See other posts from Stack Overflow
or by Bex
Published on 2010-12-22T14:41:41Z
Indexed on
2010/12/22
14:54 UTC
Read the original article
Hit count: 218
Hi
I am using the google maps API and have copied the examples and have ended up with a function called "initialize" that is called from the body onload.
I am using the maps in a few different user controls, which are placed within content place holders, so the body tag is in the master page.
Is there a way of calling initialize directly in the usercontrol rather than having to place an onload on the masterpage? Ideally I want my user control to be a stand alone control that I can just slot into pages without trying to access the master page body onload.
I have tried calling the Initialize function from my page load of the user control (by adding a start up script), but the map doesn't appear.
Any suggestions?
My code:
<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 test master 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>
© Stack Overflow or respective owner
