Google지도 버전 3으로 코드 업데이트

Question

코드를 Google지도 버전 3으로 업데이트 :

다음 코드를 업데이트하는 방법 Google지도 버전 2를 latets 버전 3에 사용하는 방법은 무엇입니까? 누군가 나를 도울 수 있습니까 ?? Google은 api를 2에서 3으로 업데이트 했으므로 코드도 업데이트하고 싶습니다.

<div id="map" style="width: 100%; height: 550px"></div> 

<script type="text/javascript" language="javascript"> 
<!-- 
function loadGoogleMapsAPI() { 
    var script = document.createElement("script"); 
    script.src = "http://www.google.com/jsapi?key=ABQIAAAAyMh6cNobclm3PrugAcTTkRRV64WZ3bUzAPoCqIiq79wunMeoIRQemm_B8-GS77IHof0-AYwkueQQaQ&hl=nl&callback=loadMaps"; 
    script.type = "text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(script); 
} 

function loadMaps() { 
    google.load("maps", "2", {"callback" : mapLoaded}); 
} 

var gmarkers = []; 

function mapLoaded() { 
    var map = null; 
    var geocoder = null; 

    if (GBrowserIsCompatible()) { 
     var labelContainer; 
     var side_bar_html = ""; 

     function LabelControl() { } 

     LabelControl.prototype = new GControl(); 

     LabelControl.prototype.initialize = function(map) { 
      labelContainer = document.createElement("div"); 
      labelContainer.style.overflow="auto"; 
      labelContainer.style.backgroundColor = "#ffffff"; 
      labelContainer.style.border = "1px solid black"; 
      labelContainer.style.height="350px"; 
      labelContainer.style.width="137px"; 
      labelContainer.style.paddingLeft="5px"; 

      map.getContainer().appendChild(labelContainer); 
      return labelContainer; 
     } 

     LabelControl.prototype.getDefaultPosition = function() { 
      return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 33)); 
     } 

     var bounds = new GLatLngBounds(); 
     var map = new GMap2(document.getElementById("map"),{size:new GSize(screen.width-410,screen.height-300)}); 
     map.setCenter(new GLatLng(0,0), 1); 
     map.setUIToDefault(); 
     map.addControl(new LabelControl()); 
     map.addControl(new GMapTypeControl()); 
     map.addControl(new GScaleControl()); 

     geocoder = new GClientGeocoder(); 

     var Tsize = new GSize(150, 150); 
     map.addControl(new GOverviewMapControl(Tsize)); 

     showAddress("blsa bla<br />bla 46<br />1blabla RX blabla (Noordholland)<br />Nederland","Datum/ Tijd: 17 okt 2012, 19:38<br />Ordernummer: <a href=\"order.php?cart_order_id=121017-193856-6447\" class=\"txtLink\">121017-193856-6447</a><br />Status: Open (nieuwe order)<br />Bedrag: 1221.20","blabla 46,1741 rx schagen,Nederland","Mw blabla"); 
     showAddress("blabla<br />The Boathouse<br />blabla<br />blabla blablabla (Ablabla)<br />Verenigd Koninkrijk","Datum/ Tijd: 17 okt 2012, 09:47<br />Ordernummer: <a href=\"order.php?cart_order_id=121017-094729-7406\" class=\"txtLink\">121017-094729-7406</a><br />Status: Order verwerkt &amp; voltooid<br />Bedrag: 12121.40","blablabla,blabla,ab12 blabla,Verenigd Koninkrijk"," bla"); 
     showAddress("blabla blabla<br />blablabla 46<br />2323 RX Schagen (Noordholland)<br />Nederland","Datum/ Tijd: 16 okt 2012, 20:42<br />Ordernummer: <a href=\"order.php?cart_order_id=121016-203616-1862\" class=\"txtLink\">121016-203616-1862</a><br />Status: Open (nieuwe order)<br />Bedrag: 1212.40","blabla,blabla rx blabla,Nederland","Mw Rblabla"); 
    } 

    function createMarker(point,html,html2,linkname) { 
     // use a custom icon with letter A - Z 
     var letter = String.fromCharCode("A".charCodeAt(0) + (gmarkers.length)); 
     var myIcon = new GIcon(G_DEFAULT_ICON, "http://www.google.com/mapfiles/marker" + letter + ".png"); 
     myIcon.printImage = "http://maps.google.com/mapfiles/marker"+letter+"ie.gif" 
     myIcon.mozPrintImage = "http://maps.google.com/mapfiles/marker"+letter+"ff.gif" 

     var marker = new GMarker(point, {icon:myIcon}); 
     GEvent.addListener(marker, "click", function() { 
      //marker.openInfoWindowHtml(html); 
      marker.openInfoWindowTabsHtml([new GInfoWindowTab('Klant','<span class="tdText">'+html+'</span>'), new GInfoWindowTab('Bestelling','<span class="tdText">'+html2+'</span>')]); 
     }); 
     // save the info we need to use later for the side_bar 
     gmarkers.push(marker) 
     // add a line to the side_bar html 
     side_bar_html += '<table cellspacing="0" class="wp100"><tr class="aT"><td width="20"><b class="pageTitleSmall">'+letter+':<\/b></td><td><a href="javascript:myclick(' + (gmarkers.length-1) + ')" class="txtLinkSmall">' + linkname + '<\/a></td></tr></table>'; 
     labelContainer.innerHTML = side_bar_html; 

     return marker; 
    } 

    function showAddress(customer,order,address,linkname) { 
     if (geocoder) { 
      geocoder.getLatLng(
       address, 
       function(point) { 
        if (!point) { 
         //alert(address + " not found"); 
        } else { 
         map.checkResize(); 
         var marker = createMarker(point,customer,order,linkname); 
         map.addOverlay(marker); 

         bounds.extend(point); 

         // ===== determine the zoom level from the bounds ===== 
         map.setZoom(map.getBoundsZoomLevel(bounds)); 

         // ===== determine the centre from the bounds ====== 
         map.setCenter(bounds.getCenter()); 
        } 
       } 
      ); 
     } 
    } 
} 

// === This function picks up the click and opens the corresponding info window === 
function myclick(i) { 
    GEvent.trigger(gmarkers[i], "click"); 
} 

$(document).ready(function() { 
    loadGoogleMapsAPI(); 
}); 
//--> 
</script> 

Answer 1

큰 주제이지만 여기 몇 줄에서 대답 할 수있는 것은 아닙니다. 다행히도 필요한 작업을 설명하는 전체 문서가 있습니다. https://developers.google.com/maps/articles/v2tov3