title: Google Maps API w/ error "uncaught referenceerror: system is not defined"
body: <p>I am currently developing a "uber" like web app and am working with the google maps api.</p>
  
  <p>Right now I have a home.jsp page with the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type"&gt;
  
      &lt;title&gt;Home Page&lt;/title&gt;
      &lt;style type="text/css"&gt;
          div.nav{
              text-align:right;
          }
          div.right{
              display:inline;
          }
      &lt;/style&gt;
      &lt;script src="http://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src=
      "https://google-maps-utility-library-v3.googlecode.com/svn/trunk/geolocationmarker/src/geolocationmarker-compiled.js"&gt;&lt;/script&gt;
      &lt;script language="JavaScript" type="text/javascript"&gt;
          var map;
  
          function initialize() {
              var mapOptions = {
                  zoom: 13
              };
              map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
              if (navigator.geolocation) {
                  navigator.geolocation.getCurrentPosition(function(position) {
                      var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                      var infowindow = new google.maps.InfoWindow({
                          map: map,
                          position: pos,
                          content: 'Current Location'
                      });
                      map.setCenter(pos);
                  }, function() {
                      handleNoGeolocation(true);
                  });
              } else {
                  handleNoGeolocation(false);
              }
          }
  
          function handleNoGeolocation(errorFlag) {
              if (errorFlag) {
                  var content = 'Error: The Geolocation service failed.';
              } else {
                  var content = 'Error: Your browser doesn\'t support geolocation.';
              }
              var options = {
                  map: map,
                  position: new google.maps.LatLng(60, 105),
                  content: content
              };
              var infowindow = new google.maps.InfoWindow(options);
              map.setCenter(options.position);
          }
  
          function codeAddress() {
              var addr = document.getElementById('destaddress').value;
  
              geo.geocode({
                  'address': addr
              }, function(results, status) {
                  console.error(status);
                  if (status === google.maps.GeocoderStatus.OK) {
                      //map.setCenter(results[0].geometery.location);
                      var marker = new google.maps.Marker({
                          map: map,
                          position: results[0].geometery.location
                      });
                      //marker.setPosition(results[0].geometery.location);
                      //marker.setMap(map);
                  } else {
                      alert('Error: ' + status);
                  }
              });
          }
          google.maps.event.addDomListener(window, 'load', initialize);
      &lt;/script&gt;
      &lt;script language="JavaScript" type="text/javascript"&gt;
          $(document).ready(function() {
              if (!navigator.geolocation) return;
              navigator.geolocation.getCurrentPosition(function(pos) {
                  geocoder = new google.maps.Geocoder();
                  var latlng = new google.maps.LatLng(pos.coords.latitude,
                      pos.coords.longitude);
                  geocoder.geocode({
                      'latLng': latlng
                  }, function(results, status) {
                      if (status === google.maps.GeocoderStatus.OK) {
                          $("#address").text(results[0].formatted_address);
                      }
                  });
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="nav"&gt;
          &lt;a href="home.jsp"&gt;Home&lt;/a&gt; | &lt;a href="Logout"&gt;Log Out&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;p&gt;Welcome eric&lt;/p&gt;
  
      &lt;div id="googleMap" style="width:750px;height:500px;"&gt;&lt;/div&gt;&lt;br&gt;
      You are currently located at
  
      &lt;div id="address" style="font-weight: bold;"&gt;&lt;/div&gt;&lt;br&gt;
      Enter Destination Address:
  
      &lt;form&gt;
          &lt;input id="destaddress" size="100" type="text"&gt; &lt;input onclick=
          "codeAddress()" type="button" value="Go"&gt; 
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This .jsp page displays a google map located at the users current address and also displays the users current address using the api's reverse geocoder.</p>
  
  <p>I am also trying to allow the user to search by address (using the regular geocoder) to place a destination marker on the map displayed on the page.</p>
  
  <p>I have looked at several examples of this, but for some reason I keep getting an error message: <code>Uncaught ReferenceError: system is not defined</code></p>
  
  <p>According to the error console this errors point to lines <code>codeAddress home.jsp:73</code> and <code>onclick home.jsp:117</code>.</p>
  
  <p>I have searched around for a while, but I cannot find any results from a similar error. </p>
  
  <p>Any ideas on how to resolve this issue?</p>