title: Google maps API3, javascript
body: <p>What would be the easiest way to add a marker for the address entered from the code written bellow. The code reads an address and returns the three closest stores within the database onto a map. However it doesn't show the address the user entered and I would like it to in a different color.</p>
  
  <p>I'm sorry for how it pasted from the clipboard.</p>
  
  <pre><code>    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
          &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
          &lt;title&gt;Google Maps AJAX + mySQL/PHP Example&lt;/title&gt;
          &lt;script src="http://maps.google.com/maps/api/js?sensor=false"
          type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
          //&lt;![CDATA[
          var map;
          var markers = [];
          var infoWindow;
          var locationSelect;
          var geocoder = null;
  
          function load() {
              map = new google.maps.Map(document.getElementById("map"), {
                  center: new google.maps.LatLng(40, -100),
                  zoom: 4,
                  mapTypeId: 'roadmap',
                  mapTypeControlOptions: {
                      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                  }
              });
              infoWindow = new google.maps.InfoWindow();
              locationSelect = document.getElementById("locationSelect");
              locationSelect.onchange = function () {
                  var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
                  if (markerNum != "none") {
                      google.maps.event.trigger(markers[markerNum], 'click');
                  }
              };
          }
  
          function showAddress(addressInput) {
              if (geocoder) {
                  geocoder.getLatLng(
                  addressInput, function (point) {
                      if (!point) {
                          alert(addressInput + " not found");
                      } else {
                          map.setCenter(point, 15);
                          var marker1 = new GMarker(point, {
                              draggable: true
                          });
                          map.addOverlay(marker1);
                          GEvent.addListener(marker1, "dragend", function () {
                              marker1.openInfoWindowHtml(marker1.getLatLng().toUrlValue(6));
                          });
                          GEvent.addListener(marker1, "click", function () {
                              marker1.openInfoWindowHtml(marker1.getLatLng().toUrlValue(6));
                          });
                          GEvent.trigger(marker1, "click");
                      }
                  });
              }
          }
  
          function searchLocations() {
              var address = document.getElementById("addressInput").value;
              var geocoder = new google.maps.Geocoder();
              geocoder.geocode({
                  address: address
              }, function (results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                      searchLocationsNear(results[0].geometry.location);
                  } else {
                      alert(address + ' not found');
                  }
              });
          }
  
          function clearLocations() {
              infoWindow.close();
              for (var i = 0; i &lt; markers.length; i++) {
                  markers[i].setMap(null);
              }
              markers.length = 0;
              locationSelect.innerHTML = "";
              var option = document.createElement("option");
              option.value = "none";
              option.innerHTML = "See all results:";
              locationSelect.appendChild(option);
          }
  
          function searchLocationsNear(center) {
              clearLocations();
              var radius = document.getElementById('radiusSelect').value;
              var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&amp;lng=' + center.lng() + '&amp;radius=' + radius;
              downloadUrl(searchUrl, function (data) {
                  var xml = parseXml(data);
                  var markerNodes = xml.documentElement.getElementsByTagName("marker");
                  var bounds = new google.maps.LatLngBounds();
                  for (var i = 0; i &lt; markerNodes.length; i++) {
                      var name = markerNodes[i].getAttribute("name");
                      var address = markerNodes[i].getAttribute("address");
                      var distance = parseFloat(markerNodes[i].getAttribute("distance"));
                      var latlng = new google.maps.LatLng(
                      parseFloat(markerNodes[i].getAttribute("lat")), parseFloat(markerNodes[i].getAttribute("lng")));
                      createOption(name, distance, i);
                      createMarker(latlng, name, address);
                      bounds.extend(latlng);
                  }
                  map.fitBounds(bounds);
                  locationSelect.style.visibility = "visible";
                  locationSelect.onchange = function () {
                      var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
                      google.maps.event.trigger(markers[markerNum], 'click');
                  };
              });
          }
  
          function createMarker(latlng, name, address) {
              var html = "&lt;b&gt;" + name + "&lt;/b&gt; &lt;br/&gt;" + address;
              var marker = new google.maps.Marker({
                  map: map,
                  position: latlng
              });
              google.maps.event.addListener(marker, 'click', function () {
                  infoWindow.setContent(html);
                  infoWindow.open(map, marker);
              });
              markers.push(marker);
          }
  
          function createOption(name, distance, num) {
              var option = document.createElement("option");
              option.value = num;
              option.innerHTML = name + "(" + distance.toFixed(1) + ")";
              locationSelect.appendChild(option);
          }
  
          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 parseXml(str) {
              if (window.ActiveXObject) {
                  var doc = new ActiveXObject('Microsoft.XMLDOM');
                  doc.loadXML(str);
                  return doc;
              } else if (window.DOMParser) {
                  return (new DOMParser).parseFromString(str, 'text/xml');
              }
          }
  
          function doNothing() {}
          //]]&gt;
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body style="margin:0px; padding:0px;" onload="load()"&gt;
          &lt;div&gt;Adress:
              &lt;input type="text" id="addressInput" size="10" /&gt;Product:
              &lt;input type="text" id="ProductInput" size="10" /&gt;
              &lt;select id="radiusSelect"&gt;
                  &lt;option value="3" selected&gt;3mi&lt;/option&gt;
                  &lt;option value="5"&gt;5mi&lt;/option&gt;
                  &lt;option value="10"&gt;10mi&lt;/option&gt;
                  &lt;option value="25"&gt;25mi&lt;/option&gt;
              &lt;/select&gt;
              &lt;input type="button" onclick="searchLocations(); showAddress(this.address.value); "
              value="Search" /&gt;
              &lt;br&gt;
              &lt;input type="checkbox" name="currentLocation" value="currentLocation"
              /&gt;Use Current Location&lt;/div&gt;
          &lt;div&gt;
              &lt;select id="locationSelect" style="width:500;visibility:hidden"&gt;&lt;/select&gt;
          &lt;/div&gt;
          &lt;div id="map" style="width: 500; height: 500"&gt;&lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>