Currently, I am working on a project to create an ASP.NET webforms page that will showcase a Google map using the Google Maps JavaScript API with multiple markers.
Everything is functioning smoothly as long as I don't place <div id="map-canvas"> within the <form> tag.
However, when I do move <div id="map-canvas"> inside the <form>, the page simply turns blank without any errors displayed.
Upon inspecting the blank page, it appears that <div id="map-canvas"> is being filled with some base elements needed to show the map (excluding the markers), but nothing is actually visible on the page.
Could this issue be related to difficulties faced by the document.getElementById in traversing the DOM due to the dynamically created ID in the
<form id="form1" runat="server">Note: The provided code serves as a test page and once resolved, it will be incorporated into an ASP.NET MasterPage for better organization.
CSS
<style type="text/css">
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
Script
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlngCenter = new google.maps.LatLng(30.000000, -100.000000);
var mapOptions = { zoom: 3, center: latlngCenter }
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var latlngPlaceOne = new google.maps.LatLng(-30.000000, 150.000000);
var markerPlaceOne = new google.maps.Marker({
position: latlngPlaceOne,
map: map,
title: 'Place One'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
HTML
<body>
<form id="form1" runat="server">
<div id="map-canvas"></div>
</form>
</body>