title: Should a Geocoded Google Map appear while developing?
body: <p>I am using Visual Web Developer 2010 to build an ASP.NET based web site. I have a page where the user inputs address content, and as they do I use the geocode api and a Google map updates and places a marker pin on the address.</p>
  
  <p>Technically the geocode is working as I am recieving the latitude and longitude values but when I test on localhost the map is not displaying.</p>
  
  <p>I do have an api key generated for my website.</p>
  
  <p>Should I expect to see the map appear on localhost, or will it only display when hosted on the web where the api key matches the domain?</p>
  
  <p>Thanks for your help, </p>
  
  <p>James</p>
  
  <p>Below is my code:</p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/Partner/Partner.Master" AutoEventWireup="true" CodeBehind="LocationMod.aspx.cs" Inherits="AideWeb.Partner.LocationMod" %&gt;
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"&gt;
  &lt;script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false&amp;amp;key=&lt;my api key&gt;" type="text/javascript"&gt;&lt;/script&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"/&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
  &lt;title&gt;Add Location&lt;/title&gt;
  &lt;style type="text/css"&gt;
    html { height: 30% }
    body { height: 30%; margin: 0; padding: 0 }
    #map_canvas { height: 100% }
      .style3
      {
          text-align: left;
      }
      .style4
      {
          text-align: right;
      }
      &lt;/style&gt;
  &lt;script type="text/javascript" src="http//maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var geocoder;
  var map;
  function initialize() {
      geocoder = new google.maps.Geocoder();
      var lat = document.getElementById('&lt;%= hdnLat.ClientID%&gt;').value;
      var lng = document.getElementById('&lt;%= hdnLong.ClientID%&gt;').value;
      var latlng = new google.maps.LatLng(lat, lng);
      var myOptions = {
          zoom: 8,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
  
  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 was not successful for the following reason: " + status);
          }
      });
  }
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  function calculateCoordinates() {
  
      var txtAddress1 = document.getElementById('&lt;%= txtAddress1.ClientID%&gt;');
      var txtAddress2 = document.getElementById('&lt;%= txtAddress2.ClientID%&gt;');
      var txtTown = document.getElementById('&lt;%= txtTown.ClientID%&gt;');
      var txtPostcode = document.getElementById('&lt;%= txtPostcode.ClientID%&gt;');
      var txtCountry = document.getElementById('&lt;%= ddlCountry.ClientID%&gt;');
  
      var address = txtAddress1.value + ', ';
      address += txtAddress2.value + ', ';
      address += txtTown.value + ', ';
      address += txtPostcode.value + ', ';
      address += txtCountry.value;
  
      var geocoder;
      geocoder = new GClientGeocoder();
      geocoder.getLatLng(address, function (latlng) {
          if (!latlng) {
              alert(address + ' not found');
          } else {
              document.getElementById('&lt;%= hdnLat.ClientID%&gt;').value = latlng.lat();
              document.getElementById('&lt;%= hdnLong.ClientID%&gt;').value = latlng.lng();
          }
      });
  
  }
  
  &lt;/script&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"&gt;
  &lt;body&gt;
  &lt;div align=center&gt;
  &lt;table&gt;
  &lt;tr&gt;&lt;td class="style4"&gt;Location Name:&lt;/td&gt;
  &lt;td class="style3"&gt;
  &lt;asp:TextBox ID="txtName" runat="server" Width="250px" MaxLength="50"&gt;&lt;/asp:TextBox&gt;
  &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" 
      ControlToValidate="txtName" ErrorMessage="*" ForeColor="#FF3399" 
      Display="Dynamic"&gt;&lt;/asp:RequiredFieldValidator&gt;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td class="style4"&gt;Email Address:&lt;/td&gt;
  &lt;td class="style3"&gt;
  &lt;asp:TextBox ID="txtEmailAddress" runat="server" Width="250px" MaxLength="50"&gt;    &lt;/asp:TextBox&gt;
  &lt;asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
      ControlToValidate="txtEmailAddress" Display="Dynamic" ErrorMessage="*" 
      ForeColor="#FF33CC" 
      ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"&gt;    &lt;/asp:RegularExpressionValidator&gt;
  &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
      ControlToValidate="txtEmailAddress" ErrorMessage="*" ForeColor="#FF3399" 
      Display="Dynamic"&gt;&lt;/asp:RequiredFieldValidator&gt;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td class="style4"&gt;Work Phone:&lt;/td&gt;
  &lt;td class="style3"&gt;&lt;asp:TextBox id="txtWorkPhone" runat="server" MaxLength="50" Width="250px"&gt;&lt;/asp:TextBox&gt;
  &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
      ControlToValidate="txtWorkPhone" ErrorMessage="*" ForeColor="#FF3399" 
      Display="Dynamic"&gt;&lt;/asp:RequiredFieldValidator&gt;
  &lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td class="style4"&gt;Address Line 1:&lt;/td&gt;
  &lt;td class="style3"&gt;&lt;asp:TextBox id="txtAddress1" runat="server" MaxLength="50" Width="250px"&gt;&lt;/asp:TextBox&gt;
  &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
      ControlToValidate="txtAddress1" ErrorMessage="*" ForeColor="#FF3399" 
      Display="Dynamic"&gt;&lt;/asp:RequiredFieldValidator&gt;&lt;/td&gt;&lt;td rowspan="6"&gt;
  &lt;div id="map_canvas" style="height:50%;top:300px"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td class="style4"&gt;Address Line 2:&lt;/td&gt;
  &lt;td class="style3"&gt;&lt;asp:TextBox id="txtAddress2" runat="server" MaxLength="50" Width="250px"&gt;&lt;/asp:TextBox&gt;&lt;/td&gt;&lt;td&gt;
  &amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td class="style4"&gt;Town:&lt;/td&gt;
  &lt;td class="style3"&gt;&lt;asp:TextBox id="txtTown" runat="server" MaxLength="50" Width="250px"&gt;&lt;/asp:TextBox&gt;
  &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" 
      ControlToValidate="txtTown" ErrorMessage="*" ForeColor="#FF3399" 
      Display="Dynamic"&gt;&lt;/asp:RequiredFieldValidator&gt;&lt;/td&gt;&lt;td&gt;
      &amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td class="style4"&gt;State:&lt;/td&gt;
  &lt;td class="style3"&gt;&lt;asp:TextBox id="txtState" runat="server" MaxLength="50" Width="250px"&gt;&lt;/asp:TextBox&gt;&lt;/td&gt;&lt;td&gt;
  &amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td class="style4"&gt;Postcode:&lt;/td&gt;
  &lt;td class="style3"&gt;&lt;asp:TextBox id="txtPostcode" runat="server" MaxLength="10" Width="250px"&gt;&lt;/asp:TextBox&gt;
  &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" 
      ControlToValidate="txtPostcode" ErrorMessage="*" ForeColor="#FF3399" 
      Display="Dynamic"&gt;&lt;/asp:RequiredFieldValidator&gt;&lt;/td&gt;&lt;td&gt;
      &amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td class="style4"&gt;Country:&lt;/td&gt;
  &lt;td class="style3"&gt;&lt;asp:DropDownList ID="ddlCountry" runat="server" Height="22px" Width="257px"&gt;&lt;/asp:DropDownList&gt;&lt;/td&gt;&lt;td&gt;
  &amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td colspan=2 class="style4"&gt;&lt;asp:ImageButton ID="btnSave" 
      runat="server" ImageUrl="~/Images/save.png" onclick="btnSave_Click" /&gt;&lt;/td&gt;       &lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
  
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;asp:HiddenField ID="hdnLat" runat="server" /&gt;
  &lt;asp:HiddenField ID="hdnLong" runat="server" /&gt;
  &lt;/body&gt;
  &lt;/asp:Content&gt;
  </code></pre>