Google Map Example

by Pragnesh Chauhan

HTML

<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true"></script>
    
    <script type="text/javascript">
        var geocoder;
      var map;
      function initialize() {
                    // add mapOptions here to the values in the input boxes.
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 100.644),
          zoom: 2,
          mapTypeId: google.maps.MapTypeId.ROADMAP  
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        geocoder = new google.maps.Geocoder();
      }
        
        function addAddress() {
        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);
          }
        });
      }
    </script>
    <button type="button" onclick="initialize()">View example (map-simple.html)</button>
 <input id="address" type="textbox" value="Tampa,FL">
      <input type="button" value="add" onclick="addAddress()">
    <div id="map_canvas" style="width:100%; height:100%"></div>

CSS

html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }