title: Google maps autocomplete address to function
body: <p>I was wondering if someone can tell me why this html code works and goes into my database...The address, parking and streetsweeping go into the saveData() function ok at the lower section.</p>
  
  <p>The other code html page is similar but I get an error...Uncaught ReferenceError: saveData is not onclick. Th is is on the second page of html code is where I get the error I want the address, parking and streetsweeping to go into the savaData() function. When I do document.getElementById("address").value the value shows the "address" but it doesn't go into the database???
  --></p>
  
  <pre><code>        &lt;!DOCTYPE html&gt;
          &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
            &lt;head&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;Saving User Location Parking Situation&lt;/title&gt;
              &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
              &lt;script type="text/javascript"&gt;
              var marker;
              var infowindow;
  
              function initialize() {
                var latlng = new google.maps.LatLng(33.884277, -118.325066);
                var options = {
                  zoom: 18,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(document.getElementById("map_canvas"), options);
                var html = "&lt;table&gt;"+"&lt;tr&gt;&lt;td&gt;Input your location and the parking situation&lt;/td&gt;&lt;/tr&gt;"+"&lt;tr&gt;&lt;td&gt;Address:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='address' /&gt;&lt;/td&gt;&lt;/tr&gt;"+"&lt;tr&gt;&lt;td&gt;Parking:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='parking' /&gt;&lt;/td&gt; &lt;/tr&gt;"+"&lt;tr&gt;&lt;td&gt;Street Sweeping:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='streetsweeping'/&gt; &lt;/td&gt; &lt;/tr&gt;"+"&lt;td&gt;&lt;input type='button' value='Save &amp; Close' onclick='saveData()'/&gt;&lt;/td&gt;&lt;/tr&gt;";
              infowindow = new google.maps.InfoWindow({
               content: html
              });
  
              google.maps.event.addListener(map, "click", function(event) {
                  marker = new google.maps.Marker({
                    position: event.latLng,
                    map: map
                  });
                  google.maps.event.addListener(marker, "click", function() {
                    infowindow.open(map, marker);
                  });
              });
              }
  
              function saveData() {
  
                var address = document.getElementById("address").value;
                var parking = document.getElementById("parking").value;
                var streetsweeping = document.getElementById("streetsweeping").value;
                var latlng = marker.getPosition();
  
                var url = "phpsqlinfo_addrow.php?address=" + address +
                          "&amp;parking=" + parking + "&amp;streetsweeping=" + streetsweeping + "&amp;lat=" + latlng.lat() + "&amp;lng=" + latlng.lng();
                downloadUrl(url, function(data, responseCode) {
                  if (responseCode == 200 &amp;&amp; data.length &lt;= 1) {
                    infowindow.close();
                    document.getElementById("message").innerHTML = "Location added.";
                  }
                });
              }
  
              function downloadUrl(url, callback) {
                var request = window.ActiveXObject ?
                    new ActiveXObject('Microsoft.XMLHTTP') :
                    new XMLHttpRequest;
  
                request.onreadystatechange = function() {
                  if (request.readyState == 4) {
                    request.onreadystatechange = doNothing;
                    callback(request.responseText, request.status);
                  }
                };
  
                request.open('GET', url, true);
                request.send(null);
              }
  
              function doNothing() {}
              &lt;/script&gt;
            &lt;/head&gt;
            &lt;body style="margin:0px; padding:0px;" onLoad="initialize()"&gt;
              &lt;div id="map_canvas" style="width: 450px; height: 800px"&gt;&lt;/div&gt;
              &lt;div id="message"&gt;&lt;body&gt;&lt;?php echo url ?&gt;&lt;/div&gt;
            &lt;/body&gt;
          &lt;/html&gt;
  
  
  
  
          &lt;!DOCTYPE html&gt;
          &lt;html&gt;
            &lt;head&gt;
              &lt;title&gt;Place Autocomplete&lt;/title&gt;
              &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
              &lt;meta charset="utf-8"&gt;
              &lt;style&gt;
                html, body, #map-canvas {
                  height: 100%;
                  margin: 0px;
                  padding: 0px
                }
                .controls {
                  margin-top: 16px;
                  border: 1px solid transparent;
                  border-radius: 2px 0 0 2px;
                  box-sizing: border-box;
                  -moz-box-sizing: border-box;
                  height: 32px;
                  outline: none;
                  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
                }
  
                #pac-input {
                  background-color: #fff;
                  padding: 0 11px 0 13px;
                  width: 400px;
                  font-family: Roboto;
                  font-size: 15px;
                  font-weight: 300;
                  text-overflow: ellipsis;
                }
  
                #pac-input:focus {
                  border-color: #4d90fe;
                  margin-left: -1px;
                  padding-left: 14px;  /* Regular padding-left + 1. */
                  width: 401px;
                }
  
                .pac-container {
                  font-family: Roboto;
                }
  
                #type-selector {
                  color: #fff;
                  background-color: #4d90fe;
                  padding: 5px 11px 0px 11px;
                }
  
                #type-selector label {
                  font-family: Roboto;
                  font-size: 13px;
                  font-weight: 300;
                }
                fieldset { 
              display: block;
              margin-left: 2px;
              margin-right: 2px;
              padding-top: 0.35em;
              padding-bottom: 0.625em;
              padding-left: 0.75em;
              padding-right: 0.75em;
              }
  
          autocomplete {
              font-style:normal;
              font-weight:bold;
          }
  
          .gm-style-iw {
              height: 350px;
              width: 400px;
          }
  
          }
  
              &lt;/style&gt;
              &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places, http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
  
              &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
                &lt;script src="geomaps.js"&gt;&lt;/script&gt;
  
              &lt;script&gt;
  
              var marker;
              var infowindow;
              var address;
          function initialize() {
            var mapOptions = {
              center: new google.maps.LatLng(33.884277, -118.325066),
              zoom: 13
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
  
            var input = /** @type {HTMLInputElement} */(
                document.getElementById('pac-input'));
  
            var types = document.getElementById('type-selector');
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
  
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.bindTo('bounds', map);
  
            var infowindow = new google.maps.InfoWindow({ maxWidth: 600 });
            var marker = new google.maps.Marker({
              map: map,
              anchorPoint: new google.maps.Point(0, -29)
            });
  
            google.maps.event.addListener(autocomplete, 'place_changed', function() {
              infowindow.close();
              marker.setVisible(false);
              var place = autocomplete.getPlace();
              if (!place.geometry) {
                return;
              }
  
              if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
              } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);  // Why 17? Because it looks good.
              }
              marker.setIcon(/** @type {google.maps.Icon} */({
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(35, 35)
              }));
              marker.setPosition(place.geometry.location);
              marker.setVisible(true);
  
  
              var html = "&lt;form action='#'&gt;"+"&lt;table&gt;"+"&lt;tr&gt;&lt;td&gt;Input your location and the parking situation&lt;/td&gt;&lt;/tr&gt;"+"&lt;tr&gt;&lt;td&gt;Address:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='address'  value='"+place.formatted_address+"' disabled /&gt;&lt;/td&gt;&lt;/tr&gt;"+"&lt;tr&gt;&lt;td&gt;Parking:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='parking' /&gt;&lt;/td&gt; &lt;/tr&gt;"+"&lt;tr&gt;&lt;td&gt;Street Sweeping:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='streetsweeping' /&gt; &lt;/td&gt; &lt;/tr&gt;"+"&lt;td&gt;&lt;input type='button' value='Save &amp; Close' onclick = 'saveData()'/&gt;&lt;/td&gt;&lt;/tr&gt;"+"&lt;/form&gt;";
  
              infowindow.setContent("&lt;div id='iw'&gt;" + html + "&lt;/div&gt;");
  
  
          function saveData() {
  
                var address = escape(document.getElementById("address").value);
                console.log("address");
                var parking = document.getElementById("parking").value;
                 var streetsweeping = document.getElementById("streetsweeping").value;
                var latlng = marker.getPosition();
  
                var url = "phpsqlinfo_addrow.php?address=" + address +
                          "&amp;parking=" + parking + "&amp;streetsweeping=" + streetsweeping + "&amp;lat=" + latlng.lat() + "&amp;lng=" + latlng.lng();
  
                downloadUrl(url, function(data, responseCode) {
                  if (responseCode == 200 &amp;&amp; data.length &lt;= 1) {
                    infowindow.close();
                    document.getElementById("message").innerHTML = "Location added.";
                  }
                });
              }
  
              function downloadUrl(url, callback) {
                var request = window.ActiveXObject ?
                    new ActiveXObject('Microsoft.XMLHTTP') :
                    new XMLHttpRequest;
  
                request.onreadystatechange = function() {
                  if (request.readyState == 4) {
                    request.onreadystatechange = doNothing;
                    callback(request.responseText, request.status);
                  }
                };
  
                request.open('GET', url, true);
                request.send(null);
              }
  
              function doNothing() {}
  
              infowindow.open(map, marker);
            });
          }
  
          google.maps.event.addDomListener(window, 'load', initialize);
  
  
              &lt;/script&gt;
            &lt;/head&gt;
            &lt;body&gt;
              &lt;input id="pac-input" class="controls" type="text"
                  placeholder="Enter Your Address"&gt;
  
              &lt;div id="map-canvas" style="width: 650px; height: 800px"&gt;&lt;/div&gt;
               &lt;div id="message"&gt;&lt;/div&gt;
            &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>