ASP.net Google Maps
Question
I'm trying to add a google map into a div on a ASP .Net child page (it has a masterpage). The map information seems to get loaded from google - but I can't see anything. When I hit F12 in chrome I can see my div has been filled with lots of other divs and data about the map.
Any ideas why I the map is invisible?
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Contact.aspx.cs" Inherits="CentralWebsite.Contact" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.style1
{
width: 317px;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=mykey=false">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
alert("alert " + document.getElementById("map_canvas"));
}
</script>
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<table style="width: 100%;">
<tr>
<td class="style1">
<h1>Telephone: 01709</h1>
<h1>Address</h1>
<h3></h3>
<h3>Rotherham</h3>
<h3>South Yorkshire</h3>
<h3>S60 1PP</h3>
</td>
<td>
<div id="map_canvas" style="width:100%; height:100%">
map should go here
</div>
</td>
</tr>
</table>
</asp:Content>
I am calling the initialize function by adding it as the onload attribute of the master page body as follows:
public partial class Contact : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HtmlGenericControl myBody = (HtmlGenericControl)Master.FindControl("myBody");
myBody.Attributes.Add("onload", "initialize()");
}
}
Many thanks
Rob.
4 answers
solution1
1 2016-09-30 12:12:03
在“母版”页面中，您应在标签中设置ID“ myBody”和“ Runat”服务器。
solution2
0 2013-12-26 07:54:28
In Web Forms , in order to get a visible map, I have always had to both call initialize() and explicitly set the width and height of the map_canvas div to number of pixels. You can verify that percentages cause the map div height to equal 0 px by examining the div using F12 developer tools or Firebug.
This code shows a map div that resizes as the browser resizes. Note the javascript is put into files that are referenced by the "~/bundles/gmaps" .
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testme.aspx.cs" Inherits="drawingTools.testme" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<%: System.Web.Optimization.Scripts.Render("~/bundles/gmaps") %>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', myPageLoad);
</script>
</asp:PlaceHolder>
</head>
<body>
<form runat="server">
<div id="map_canvas" class="map_canvas" >
</div>
</form>
</body>
</html>
In the aspx code google.maps.event.addDomListener(window, 'load', pageLoad); serves to invoke the myPageLoad function when the window has loaded. Or use the JQuery $(document).ready function to wait for the document to be ready for google maps initialization.
function myPageLoad() {
resize();
initialize(); // your google.map initializer
}
The resize() function used for resizable maps. You can tweak this according to requirements. The purpose is to set the dimensions of the map_canvas div to 100%.
function resize() {
var main = document.getElementById("map_canvas");
main.style.height = (getWindowHeight()) + "px";
main.style.width = (getWindowWidth()) + "px";
}
onresize = function () { resize(); };
The javascript functions, getWindowHeight() and getWindowWidth() can be obtained from many sources or you can write your own.
As an editorial aside, using google maps on aspx pages presents challenges. Eg a postback from a button control will invoke the myPageLoad function when not desired with bad results, unless the postback is disabled.
solution3
0 2012-01-15 11:08:41
Its because you not call the initialize() anywhere !
Call it on page load, or on dom ready, or just call it after the div of the map
<div id="map_canvas" style="width:100%; height:100%">map should go here</div>
<script>initialize();</script>
or even better at the close of the table that contains the div map
</table>
<script>initialize();</script>
solution4
0 2012-01-15 15:15:02
First it looks like your using version 2 of the api which has your key..you do not need this for version 3. Second, I use JQuery to call the initialize instead of adding attributes in code-behind, just seems buggy and I struggled with it and getting it to work awhile back.
Try like this (I have local reference to JQuery specified, adjust if necessary)
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
$(function () {
initialize();
});
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
alert("alert " + document.getElementById("map_canvas"));
}
</script>
Also, in css explicitly set height/width for the map_canvas:
#map_canvas
{
width: 300px;
height: 265px;
border:1px solid #C3C8BD;
border-radius:5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.