โปรดทราบว่าหากคุณเป็นลูกค้า Google Maps API for Work คุณอาจใช้รหัสไคลเอ็นต์ที่มีพารามิเตอร์ client แทนที่จะใช้พารามิเตอร์ key ระบบยังคงรองรับรหัสไคลเอ็นต์ใน Maps JavaScript API เวอร์ชัน 3 และคุณไม่จําเป็นต้องทําตามกระบวนการอัปเกรดคีย์
โหลด API
การแก้ไขครั้งแรกที่คุณต้องทํากับโค้ดเกี่ยวข้องกับวิธีโหลด API ใน v2 คุณจะโหลด Maps JavaScript API ได้ผ่านคำขอไปยัง http://maps.google.com/maps หากกำลังโหลด Maps JavaScript API v3 คุณจะต้องทําการเปลี่ยนแปลงต่อไปนี้
โหลด API จาก //maps.googleapis.com/maps/api/js
นําพารามิเตอร์ file ออก
อัปเดตพารามิเตอร์ key ด้วยคีย์ v3 ใหม่ ลูกค้า Google Maps API for Work ควรใช้พารามิเตอร์ client
บริการ - การทำงานร่วมกับบริการการแปลงพิกัดภูมิศาสตร์ เส้นทาง หรือ Street View ของ Google
กิจกรรม
รูปแบบเหตุการณ์ของ Maps JavaScript API เวอร์ชัน 3 คล้ายกับที่ใช้ในเวอร์ชัน 2 แม้ว่าจะมีการเปลี่ยนแปลงหลายอย่างอยู่เบื้องหลัง
กิจกรรมใหม่สําหรับการสนับสนุน MVC
API เวอร์ชัน 3 เพิ่มเหตุการณ์ประเภทใหม่เพื่อแสดงการเปลี่ยนแปลงสถานะของ MVC ขณะนี้เหตุการณ์มี 2 ประเภท ได้แก่
ระบบจะส่งเหตุการณ์ของผู้ใช้ (เช่น เหตุการณ์เมาส์ "คลิก") จาก DOM ไปยัง Maps JavaScript API เหตุการณ์เหล่านี้แยกต่างหากและแตกต่างจากเหตุการณ์ DOM มาตรฐาน
การแจ้งเตือนการเปลี่ยนแปลงสถานะของ MVC จะแสดงการเปลี่ยนแปลงในออบเจ็กต์ Maps API และตั้งชื่อตามรูปแบบ property_changed
ออบเจ็กต์ Maps API แต่ละรายการจะส่งออกเหตุการณ์ที่มีชื่อจำนวนหนึ่ง แอปพลิเคชันที่มีความสนใจในเหตุการณ์ที่เฉพาะเจาะจงควรลงทะเบียน Listener เหตุการณ์สําหรับเหตุการณ์เหล่านั้นและเรียกใช้โค้ดเมื่อได้รับเหตุการณ์เหล่านั้น กลไกที่ทำงานตามเหตุการณ์นี้เหมือนกันทั้งใน Maps JavaScript API v2 และ v3 ยกเว้นเนมสเปซที่เปลี่ยนจาก GEvent เป็น google.maps.event
GEvent.addListener(map,'click',function(){alert('You clicked the map.');});
google.maps.event.addListener(map,'click',function(){alert('You clicked the map.');});
// Passes an overlay argument when clicking on a mapvarmap=newGMap2(document.getElementById('map'));map.setCenter(newGLatLng(-25.363882,131.044922),4);map.setUIToDefault();GEvent.addListener(map,'click',function(overlay,latlng){if(latlng){varmarker=newGMarker(latlng);map.addOverlay(marker);}});
// Passes only an event argumentvarmyOptions={center:newgoogle.maps.LatLng(-25.363882,131.044922),zoom:4,mapTypeId:google.maps.MapTypeId.ROADMAP};varmap=newgoogle.maps.Map(document.getElementById('map'),myOptions);google.maps.event.addListener(map,'click',function(event){varmarker=newgoogle.maps.Marker({position:event.latLng,map:map});});
การควบคุม
Maps JavaScript API จะแสดงตัวควบคุม UI ที่ช่วยให้ผู้ใช้โต้ตอบกับแผนที่ได้ คุณสามารถใช้ API เพื่อปรับแต่งลักษณะที่ตัวควบคุมเหล่านี้ปรากฏ
การเปลี่ยนแปลงประเภทการควบคุม
เราได้เริ่มเปลี่ยนแปลงบางอย่างในประเภท control ด้วย v3 API
v3 API รองรับแผนที่ประเภทอื่นๆ เพิ่มเติม รวมถึงแผนที่ภูมิประเทศและความสามารถในการเพิ่มแผนที่ประเภทที่กำหนดเอง
Maps JavaScript API v3 ได้ทำการเปลี่ยนแปลงบางอย่างกับแผนที่ประเภทที่ใช้ไม่บ่อยด้วย ดังนี้
ไทล์แผนที่สำหรับวัตถุท้องฟ้าที่ไม่ใช่โลกไม่พร้อมใช้งานเป็นประเภทแผนที่ใน v3 API แต่เข้าถึงได้ในรูปแบบแผนที่ที่กำหนดเอง ดูตัวอย่างได้ที่ตัวอย่างประเภทแผนที่ที่กำหนดเอง
varpoint=newGLatLng(180*Math.random()-90,360*Math.random()-180);varmap=newGMap2(document.getElementById("map"));map.setUIToDefault();map.setCenter(point);map.setMapType(G_HYBRID_MAP);map.getCurrentMapType().getMaxZoomAtLatLng(point,function(response){if(response.status){map.setZoom(response.zoom);}else{alert("Error in Max Zoom Service.");}});
varmyLatlng=newgoogle.maps.LatLng(180*Math.random()-90,360*Math.random()-180);varmap=newgoogle.maps.Map(document.getElementById("map"),{zoom:0,center:myLatlng,mapTypeId:google.maps.MapTypeId.HYBRID});varmaxZoomService=newgoogle.maps.MaxZoomService();maxZoomService.getMaxZoomAtLatLng(myLatlng,function(response){if(response.status==google.maps.MaxZoomStatus.OK){map.setZoom(response.zoom);}else{alert("Error in Max Zoom Service.");}});
Maps JavaScript API มีออบเจ็กต์ geocoder สำหรับการแปลงที่อยู่เป็นพิกัดภูมิศาสตร์แบบไดนามิกจากข้อมูลที่ผู้ใช้ป้อน หากต้องการจับคู่ที่อยู่แบบคงที่ซึ่งทราบอยู่แล้วกับพิกัดภูมิศาสตร์ โปรดดูเอกสารประกอบของ Geocoding API
Geocoding API ได้รับการอัปเกรดและปรับปรุงอย่างมาก โดยเพิ่มฟีเจอร์ใหม่และเปลี่ยนแปลงวิธีแสดงข้อมูล
vargeocoder=newGClientGeocoder();varinfoPanel;varmap;varAccuracyDescription=['Unknown accuracy','country level accuracy','region level accuracy','sub-region level accuracy','town level accuracy','post code level accuracy','street level accuracy','intersection level accuracy','address level accuracy','premise level accuracy',];functiongeocode_result_handler(response){if(!response||response.Status.code!=200){alert('Geocoding failed. '+response.Status.code);}else{varbounds=newGLatLngBounds(newGLatLng(response.Placemark[0].ExtendedData.LatLonBox.south,response.Placemark[0].ExtendedData.LatLonBox.west),newGLatLng(response.Placemark[0].ExtendedData.LatLonBox.north,response.Placemark[0].ExtendedData.LatLonBox.east));map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));varlatlng=newGLatLng(response.Placemark[0].Point.coordinates[1],response.Placemark[0].Point.coordinates[0]);infoPanel.innerHTML+='<p>1st result is <em>'+// No info about location typeresponse.Placemark[0].address+'</em> of <em>'+AccuracyDescription[response.Placemark[0].AddressDetails.Accuracy]+'</em> at <tt>'+latlng+'</tt></p>';varmarker_title=response.Placemark[0].address+' at '+latlng;map.clearOverlays();varmarker=marker=newGMarker(latlng,{'title':marker_title});map.addOverlay(marker);}}functiongeocode_address(){varaddress=document.getElementById('input-text').value;infoPanel.innerHTML='<p>Original address: '+address+'</p>';geocoder.getLocations(address,geocode_result_handler);}functioninitialize(){map=newGMap2(document.getElementById('map'));map.setCenter(newGLatLng(38,15),2);map.setUIToDefault();infoPanel=document.getElementById('info-panel');}
vargeocoder=newgoogle.maps.Geocoder();varinfoPanel;varmap;varmarker;functiongeocode_result_handler(result,status){if(status!=google.maps.GeocoderStatus.OK){alert('Geocoding failed. '+status);}else{map.fitBounds(result[0].geometry.viewport);infoPanel.innerHTML+='<p>1st result for geocoding is <em>'+result[0].geometry.location_type.toLowerCase()+'</em> to <em>'+result[0].formatted_address+'</em> of types <em>'+result[0].types.join('</em>, <em>').replace(/_/,' ')+'</em> at <tt>'+result[0].geometry.location+'</tt></p>';varmarker_title=result[0].formatted_address+' at '+latlng;if(marker){marker.setPosition(result[0].geometry.location);marker.setTitle(marker_title);}else{marker=newgoogle.maps.Marker({position:result[0].geometry.location,title:marker_title,map:map});}}}functiongeocode_address(){varaddress=document.getElementById('input-text').value;infoPanel.innerHTML='<p>Original address: '+address+'</p>';geocoder.geocode({'address':address},geocode_result_handler);}functioninitialize(){map=newgoogle.maps.Map(document.getElementById('map'),{center:newgoogle.maps.LatLng(38,15),zoom:2,mapTypeId:google.maps.MapTypeId.HYBRID});infoPanel=document.getElementById('info-panel');}
Google Street View แสดงภาพมุมมอง 360 องศาแบบอินเทอร์แอกทีฟจากสถานที่ที่กำหนดภายในพื้นที่ให้บริการ API เวอร์ชัน 3 รองรับ Street View โดยตรงภายในเบราว์เซอร์ ต่างจากเวอร์ชัน 2 ที่ต้องมีพลูกิน Flash® เพื่อแสดงภาพ Street View
ระบบรองรับรูปภาพ Street View ผ่านการใช้ออบเจ็กต์ StreetViewPanorama ใน v3 หรือออบเจ็กต์ GStreetviewPanorama ใน v2 คลาสเหล่านี้มีอินเทอร์เฟซที่แตกต่างกัน แต่มีบทบาทเหมือนกัน ซึ่งก็คือเชื่อมต่อdivคอนเทนเนอร์กับภาพ Street View และให้คุณระบุตำแหน่งและ POV (จุดมอง) ของภาพพาโนรามา Street View
functioninitialize(){varfenwayPark=newGLatLng(42.345573,-71.098326);panoramaOptions={latlng:fenwayPark,pov:{heading:35,pitch:5,zoom:1}};varpanorama=newGStreetviewPanorama(document.getElementById('pano'),panoramaOptions);GEvent.addListener(myPano,"error",handleNoFlash);}functionhandleNoFlash(errorCode){if(errorCode==FLASH_UNAVAILABLE){alert('Error: Your browser does not support Flash');return;}}
คุณสามารถเข้าถึงข้อมูล Street View โดยตรงผ่านออบเจ็กต์ StreetViewService ใน v3 หรือออบเจ็กต์ GStreetviewClient ที่คล้ายกันใน v2 ทั้ง 2 แพลตฟอร์มมีอินเทอร์เฟซที่คล้ายกันในการดึงข้อมูลหรือตรวจสอบความพร้อมใช้งานของข้อมูล Street View รวมถึงอนุญาตให้ค้นหาตามตำแหน่งหรือรหัสภาพพาโนรามา
ในเวอร์ชัน 3 ระบบจะเปิดใช้ Street View โดยค่าเริ่มต้น แผนที่จะปรากฏขึ้นพร้อมการควบคุม Pegman ของ Street View และ API จะใช้ div แผนที่ซ้ำเพื่อแสดงภาพพาโนรามาของ Street View โค้ดต่อไปนี้แสดงวิธีจําลองลักษณะการทํางานของ v2 โดยการแยกภาพพาโนรามาของ Street View ออกเป็น div แยกต่างหาก
varmarker;varpanoClient=newGStreetviewClient();functioninitialize(){if(GBrowserIsCompatible()){varmyPano=newGStreetviewPanorama(document.getElementById('pano'));GEvent.addListener(myPano,'error',handleNoFlash);varmap=newGMap2(document.getElementById('map'));map.setCenter(newGLatLng(42.345573,-71.098326),16);map.setUIToDefault();GEvent.addListener(map,'click',function(overlay,latlng){if(marker){marker.setLatLng(latlng);}else{marker=newGMarker(latlng);map.addOverlay(marker);}varnearestPano=panoClient.getNearestPanorama(latlng,processSVData);});functionprocessSVData(panoData){if(panoData.code!=200){alert("Panorama data not found for this location.");}varlatlng=marker.getLatLng();vardLat=latlng.latRadians()-panoData.location.latlng.latRadians();vardLon=latlng.lngRadians()-panoData.location.latlng.lngRadians();vary=Math.sin(dLon)*Math.cos(latlng.latRadians());varx=Math.cos(panoData.location.latlng.latRadians())*Math.sin(latlng.latRadians())-Math.sin(panoData.location.latlng.latRadians())*Math.cos(latlng.latRadians())*Math.cos(dLon);varbearing=Math.atan2(y,x)*180/Math.PI;myPano.setLocationAndPOV(panoData.location.latlng,{yaw:bearing});}functionhandleNoFlash(errorCode){if(errorCode==FLASH_UNAVAILABLE){alert('Error: Your browser does not support Flash');return;}}}}
// Load the API with libraries=geometryvarmap;varmarker;varpanorama;varsv=newgoogle.maps.StreetViewService();functionradians(degrees){returnMath.PI*degrees/180.0};functioninitialize(){panorama=newgoogle.maps.StreetViewPanorama(document.getElementById("pano"));map=newgoogle.maps.Map(document.getElementById('map'),{center:newgoogle.maps.LatLng(42.345573,-71.098326),mapTypeId:google.maps.MapTypeId.ROADMAP,zoom:16});google.maps.event.addListener(map,'click',function(event){if(!marker){marker=newgoogle.maps.Marker({position:event.latLng,map:map});}else{marker.setPosition(event.latLng);}sv.getPanoramaByLocation(event.latLng,50,processSVData);});}functionprocessSVData(panoData,status){if(status==google.maps.StreetViewStatus.OK){alert("Panorama data not found for this location.");}varbearing=google.maps.geometry.spherical.computeHeading(panoData.location.latLng,marker.getPosition());panorama.setPano(panoData.location.pano);panorama.setPov({heading:bearing,pitch:0,zoom:1});panorama.setVisible(true);marker.setMap(panorama);}
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-06-16 UTC"],[[["Google Maps API v2 is retired and websites using it must migrate to v3."],["Migration involves obtaining a new API key, updating the API loading code, and adapting application code to v3's namespace and objects."],["V3 offers numerous improvements, including enhanced performance, modernized client-side usage limits, wider browser support, new features, and updated services."],["Key code changes include using the `google.maps` namespace, replacing obsolete methods, and adopting v3's approach to controls, overlays, and services."],["Developers should consult the provided v3 documentation and resources for detailed guidance and code examples during migration."]]],["The v2 Maps JavaScript API is discontinued, requiring migration to v3. Key actions include obtaining a new API key and updating the API loading code. Code must be updated to use the `google.maps.*` namespace, removing obsolete methods. V3 offers a lighter core, improved performance, new features like styled maps and enhanced directions, multiple InfoWindows, and modern browser support. V3 also changes the way the controls, overlays, Geocoding, Directions and Streetview work, requiring code adaptations.\n"]]
