Google Maps API 3 inside ASP.NET Web User Control
Question
When my page loads, no map is displayed. There are no errors in the console either.
If I take both JS script tags (and contents) along with the 2 div containers, and place them just above the form tag in Default.aspx.... it works just fine.
I know the custom control is being loaded, because if i put in a simple textbox it shows up.
I've got my Default.aspx page
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="DnnTest._Default" %>
<%@ Register Src="~/DnnTestView.ascx" TagPrefix="uc1" TagName="DnnTestView" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:DnnTestView runat="server" id="DnnTestView" />
</div>
</form>
</body>
</html>
And the Custom User Control "DnnTestView.ascx"
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="DnnTestView.ascx.vb" Inherits="DnnTest.DnnTestView" %>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[our key here]&sensor=true">
</script>
<script type="text/javascript">
var lat = 41.4934579;
var lng = -90.50442090000001;
var zoom = 14;
function init() {
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 16
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
title: "ARA"
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
<div id="map-contanier" style="width: 100%; height: 100%;">
<div id="map-canvas"/>
</div>
2 answers
solution1
1 ACCPTED 2014-01-02 20:22:40
#map-container does nothing to do with the size of map.
#map-canvas has 0 height. Thus, set style="height:100%" to that tag
solution2
0 2014-03-03 01:29:42
For some reason using percent height on #map-canvas didn't work for me. I had to set it to pixels.
height:100px;
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.