title: Convert google mapv2 to v3
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/6448314/how-to-put-this-code-in-v3-instead-v2-map">How to put this code in v3 instead v2 map</a>  </p>
  </blockquote>
  
  
  
  <p>I have this code and i need to convert in v3 google map code.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &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;title&gt;Google Maps AJAX + MySQL/PHP Example&lt;/title&gt;
      &lt;script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdef"
              type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
      //&lt;![CDATA[
      var map;
      var geocoder;
  
      function load() {
        if (GBrowserIsCompatible()) {
          geocoder = new GClientGeocoder();
          map = new GMap2(document.getElementById('map'));
          map.addControl(new GSmallMapControl());
          map.addControl(new GMapTypeControl());
          map.setCenter(new GLatLng(40, -100), 4);
        }
      }
  
     function searchLocations() {
       var address = document.getElementById('addressInput').value;
       geocoder.getLatLng(address, function(latlng) {
         if (!latlng) {
           alert(address + ' not found');
         } else {
           searchLocationsNear(latlng);
         }
       });
     }
  
     function searchLocationsNear(center) {
       var radius = document.getElementById('radiusSelect').value;
       var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&amp;lng=' + center.lng() + '&amp;radius=' + radius;
       GDownloadUrl(searchUrl, function(data) {
         var xml = GXml.parse(data);
         var markers = xml.documentElement.getElementsByTagName('marker');
         map.clearOverlays();
  
         var sidebar = document.getElementById('sidebar');
         sidebar.innerHTML = '';
         if (markers.length == 0) {
           sidebar.innerHTML = 'No results found.';
           map.setCenter(new GLatLng(40, -100), 4);
           return;
         }
  
         var bounds = new GLatLngBounds();
         for (var i = 0; i &lt; markers.length; i++) {
           var name = markers[i].getAttribute('name');
           var address = markers[i].getAttribute('address');
           var distance = parseFloat(markers[i].getAttribute('distance'));
           var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                                   parseFloat(markers[i].getAttribute('lng')));
  
           var marker = createMarker(point, name, address);
           map.addOverlay(marker);
           var sidebarEntry = createSidebarEntry(marker, name, address, distance);
           sidebar.appendChild(sidebarEntry);
           bounds.extend(point);
         }
         map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
       });
     }
  
      function createMarker(point, name, address) {
        var marker = new GMarker(point);
        var html = '&lt;b&gt;' + name + '&lt;/b&gt; &lt;br/&gt;' + address;
        GEvent.addListener(marker, 'click', function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }
  
      function createSidebarEntry(marker, name, address, distance) {
        var div = document.createElement('div');
        var html = '&lt;b&gt;' + name + '&lt;/b&gt; (' + distance.toFixed(1) + ')&lt;br/&gt;' + address;
        div.innerHTML = html;
        div.style.cursor = 'pointer';
        div.style.marginBottom = '5px'; 
        GEvent.addDomListener(div, 'click', function() {
          GEvent.trigger(marker, 'click');
        });
        GEvent.addDomListener(div, 'mouseover', function() {
          div.style.backgroundColor = '#eee';
        });
        GEvent.addDomListener(div, 'mouseout', function() {
          div.style.backgroundColor = '#fff';
        });
        return div;
      }
      //]]&gt;
  
    &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body onload="load()" onunload="GUnload()"&gt;
      Address: &lt;input type="text" id="addressInput"/&gt;
  
  
      Radius: &lt;select id="radiusSelect"&gt;
  
        &lt;option value="25" selected&gt;25&lt;/option&gt;
        &lt;option value="100"&gt;100&lt;/option&gt;
  
        &lt;option value="200"&gt;200&lt;/option&gt;
  
      &lt;/select&gt;
  
      &lt;input type="button" onclick="searchLocations()" value="Search Locations"/&gt;
      &lt;br/&gt;    
      &lt;br/&gt;
  &lt;div style="width:600px; font-family:Arial, 
  sans-serif; font-size:11px; border:1px solid black"&gt;
    &lt;table&gt; 
      &lt;tbody&gt; 
        &lt;tr id="cm_mapTR"&gt;
  
          &lt;td width="200" valign="top"&gt; &lt;div id="sidebar" style="overflow: auto; height: 400px; font-size: 11px; color: #000"&gt;&lt;/div&gt;
  
          &lt;/td&gt;
          &lt;td&gt; &lt;div id="map" style="overflow: hidden; width:400px; height:400px"&gt;&lt;/div&gt; &lt;/td&gt;
  
        &lt;/tr&gt; 
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;    
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>