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

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -