css - google map in asp.net page -
i trying load google map in vb.net page map not showing on page. idea wrong here?
<%@ page language="vb" autoeventwireup="false" codebehind="googlemap.aspx.vb" inherits="gdemo.googlemap" %> <!doctype html> <html lang="en"> <head runat="server"> <title></title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } </style> <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <script> var geocoder; var map; function initialize() { geocoder = new google.maps.geocoder(); var latlng = new google.maps.latlng(-34.397, 150.644); var mapoptions = { zoom: 8, center: latlng } map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); } window.onload = initialize; function codeaddress() { var address = document.getelementbyid('address').value; geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); var marker = new google.maps.marker({ map: map, position: results[0].geometry.location }); } else { alert('geocode not successful following reason: ' + status); } }); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body > <form id="form1" runat="server"> <div id="panel"> <input id="address" type="textbox" value="sydney, nsw"> <input type="button" value="geocode" onclick="codeaddress()"> </div> <div id="map-canvas"></div> </form> </body> </html>
when use percentual values in css parent element of particular element needs have particular property(height in case) set, otherwise browser not able calculate value property.
the parent element of #map-canvas form#form1 , , doesn't have height.
e.g. work:
html, body, form#form1, #map-canvas { height: 100%; margin: 0px; padding: 0px } example of populating input geocode-response:
function initialize() { geocoder = new google.maps.geocoder(); var latlng = new google.maps.latlng(-34.397, 150.644); var mapoptions = { zoom: 8, center: latlng } map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); } function codeaddress() { var address = document.getelementbyid('address').value; geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); var marker = new google.maps.marker({ map: map, position: results[0].geometry.location }); document.getelementbyid('form1').latlng.value= results[0].geometry.location.tourlvalue(); } else { alert('geocode not successful following reason: ' + status); } }); } google.maps.event.adddomlistener(window, 'load', initialize);html, body, form, #map-canvas { height: 100%; margin: 0px; padding: 0px } #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; }<script src="https://maps.googleapis.com/maps/api/js?v=3"></script> <form id="form1" runat="server"> <div id="panel"> <input id="address" type="textbox" value="sydney, nsw"> <input type="button" value="geocode" onclick="codeaddress()"> <input name="latlng" /> </div> <div id="map-canvas"></div> </form>
Comments
Post a Comment