แสดงหน้าต่างข้อมูลสำหรับเครื่องหมาย
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ตัวอย่างนี้แสดงเครื่องหมายใน 3 เมืองใหญ่ในออสเตรเลีย เมื่อผู้ใช้แตะเครื่องหมาย หน้าต่างข้อมูลจะปรากฏขึ้น
เริ่มต้นใช้งาน
คุณต้องกําหนดค่าสภาพแวดล้อมการพัฒนาก่อนจึงจะลองใช้โค้ดตัวอย่างได้
ดูข้อมูลเพิ่มเติมได้ที่ตัวอย่างโค้ด Maps SDK สำหรับ iOS
ดูโค้ด
Swift
import GoogleMaps
import UIKit
final class MarkerInfoWindowViewController: UIViewController {
private let sydneyMarker = GMSMarker(
position: CLLocationCoordinate2D(latitude: -33.8683, longitude: 151.2086))
private let melbourneMarker = GMSMarker(
position: CLLocationCoordinate2D(latitude: -37.81969, longitude: 144.966085))
private let brisbaneMarker = GMSMarker(
position: CLLocationCoordinate2D(latitude: -27.4710107, longitude: 153.0234489))
private lazy var contentView: UIImageView = {
return UIImageView(image: UIImage(named: "aeroplane"))
}()
override func loadView() {
let cameraPosition = GMSCameraPosition(latitude: -37.81969, longitude: 144.966085, zoom: 4)
let mapView = GMSMapView(frame: .zero, camera: cameraPosition)
mapView.delegate = self
view = mapView
sydneyMarker.title = "Sydney"
sydneyMarker.snippet = "Population: 4,605,992"
sydneyMarker.map = mapView
melbourneMarker.title = "Melbourne"
melbourneMarker.snippet = "Population: 4,169,103"
melbourneMarker.map = mapView
brisbaneMarker.title = "Brisbane"
brisbaneMarker.snippet = "Population: 2,189,878"
brisbaneMarker.map = mapView
}
}
extension MarkerInfoWindowViewController: GMSMapViewDelegate {
func mapView(_ mapView: GMSMapView, markerInfoWindow marker: GMSMarker) -> UIView? {
if marker == sydneyMarker {
return contentView
}
return nil
}
func mapView(_ mapView: GMSMapView, markerInfoContents marker: GMSMarker) -> UIView? {
if marker == brisbaneMarker {
return contentView
}
return nil
}
func mapView(_ mapView: GMSMapView, didCloseInfoWindowOf marker: GMSMarker) {
showToast(message: "Info window for marker \(marker.title ?? "") closed.")
}
func mapView(_ mapView: GMSMapView, didLongPressInfoWindowOf marker: GMSMarker) {
showToast(message: "Info window for marker \(marker.title ?? "") long pressed.")
}
}
extension UIViewController {
func showToast(message: String) {
let toast = UIAlertController(title: nil, message: message, preferredStyle: .alert)
present(
toast, animated: true,
completion: {
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + .seconds(2)) {
toast.dismiss(animated: true)
}
})
}
}
Objective-C
#import "GoogleMapsDemos/Samples/MarkerInfoWindowViewController.h"
#import "GoogleMapsDemos/UIViewController+GMSToastMessages.h"
#import <GoogleMaps/GoogleMaps.h>
@interface MarkerInfoWindowViewController () <GMSMapViewDelegate>
@end
@implementation MarkerInfoWindowViewController {
GMSMarker *_sydneyMarker;
GMSMarker *_melbourneMarker;
GMSMarker *_brisbaneMarker;
UIView *_contentView;
}
- (void)viewDidLoad {
[super viewDidLoad];
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-37.81969
longitude:144.966085
zoom:4];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
_sydneyMarker = [[GMSMarker alloc] init];
_sydneyMarker.title = @"Sydney";
_sydneyMarker.snippet = @"Population: 4,605,992";
_sydneyMarker.position = CLLocationCoordinate2DMake(-33.8683, 151.2086);
_sydneyMarker.map = mapView;
NSLog(@"sydneyMarker: %@", _sydneyMarker);
_melbourneMarker.map = nil;
_melbourneMarker = [[GMSMarker alloc] init];
_melbourneMarker.title = @"Melbourne";
_melbourneMarker.snippet = @"Population: 4,169,103";
_melbourneMarker.position = CLLocationCoordinate2DMake(-37.81969, 144.966085);
_melbourneMarker.map = mapView;
NSLog(@"melbourneMarker: %@", _melbourneMarker);
_brisbaneMarker.map = nil;
_brisbaneMarker = [[GMSMarker alloc] init];
_brisbaneMarker.title = @"Brisbane";
_brisbaneMarker.snippet = @"Population: 2,189,878";
_brisbaneMarker.position = CLLocationCoordinate2DMake(-27.4710107, 153.0234489);
_brisbaneMarker.map = mapView;
NSLog(@"brisbaneMarker: %@", _brisbaneMarker);
_contentView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"aeroplane"]];
mapView.delegate = self;
self.view = mapView;
}
#pragma mark GMSMapViewDelegate
- (UIView *)mapView:(GMSMapView *)mapView markerInfoWindow:(GMSMarker *)marker {
if (marker == _sydneyMarker) {
return _contentView;
}
return nil;
}
- (UIView *)mapView:(GMSMapView *)mapView markerInfoContents:(GMSMarker *)marker {
if (marker == _brisbaneMarker) {
return _contentView;
}
return nil;
}
- (void)mapView:(GMSMapView *)mapView didCloseInfoWindowOfMarker:(GMSMarker *)marker {
NSString *message =
[NSString stringWithFormat:@"Info window for marker %@ closed.", marker.title];
[self gms_showToastWithMessage:message];
}
- (void)mapView:(GMSMapView *)mapView didLongPressInfoWindowOfMarker:(GMSMarker *)marker {
NSString *message =
[NSString stringWithFormat:@"Info window for marker %@ long pressed.", marker.title];
[self gms_showToastWithMessage:message];
}
@end
เรียกใช้แอปตัวอย่างเวอร์ชันเต็มในเครื่อง
แอปตัวอย่าง Maps SDK สําหรับ iOS มีให้บริการเป็นไฟล์เก็บถาวรที่ดาวน์โหลดได้จาก GitHub
ทำตามขั้นตอนต่อไปนี้เพื่อติดตั้งและลองใช้แอปตัวอย่าง Maps SDK สําหรับ iOS
- เรียกใช้
git clone https://github.com/googlemaps-samples/maps-sdk-for-ios-samples.git
เพื่อโคลนที่เก็บตัวอย่างไปยังไดเรกทอรีในเครื่อง
เปิดหน้าต่างเทอร์มินัล ไปที่ไดเรกทอรีที่คุณโคลนไฟล์ตัวอย่าง แล้วเจาะลึกลงในไดเรกทอรี GoogleMaps
Swift
cd maps-sdk-for-ios-samples-main/GoogleMaps-Swift
pod install
open GoogleMapsSwiftDemos.xcworkspace
Objective-C
cd maps-sdk-for-ios-samples-main/GoogleMaps
pod install
open GoogleMapsDemos.xcworkspace
- ใน Xcode ให้กดปุ่มคอมไพล์เพื่อสร้างแอปด้วยรูปแบบปัจจุบัน บิลด์แสดงข้อผิดพลาดโดยแจ้งให้คุณป้อนคีย์ API ใน
SDKConstants.swift
ไฟล์สำหรับ Swift หรือSDKDemoAPIKey.h
ไฟล์สำหรับ Objective-C
- รับคีย์ API จากโปรเจ็กต์ที่เปิดใช้ Maps SDK สําหรับ iOS
- แก้ไขไฟล์
SDKConstants.swift
สำหรับ Swift หรือไฟล์ SDKDemoAPIKey.h
สำหรับ Objective-C แล้ววางคีย์ API ของคุณลงในคําจํากัดความของค่าคงที่ apiKey
หรือ kAPIKey
เช่น
Swift
static let apiKey = "YOUR_API_KEY"
Objective-C
static NSString *const kAPIKey = @"YOUR_API_KEY";
- ใน
SDKConstants.swift
ไฟล์ (Swift) หรือSDKDemoAPIKey.h
ไฟล์ (Objective-C) ให้ลบบรรทัดต่อไปนี้ออก เนื่องจากใช้เพื่อบันทึกปัญหาที่ผู้ใช้กำหนด
Swift
#error (Register for API Key and insert here. Then delete this line.)
Objective-C
#error Register for API Key and insert here.
- สร้างและเรียกใช้โปรเจ็กต์ หน้าต่างโปรแกรมจำลอง iOS จะปรากฏขึ้นพร้อมแสดงรายการเดโม Maps SDK
- เลือกตัวเลือกใดตัวเลือกหนึ่งที่แสดงเพื่อทดลองใช้ฟีเจอร์ของ Maps SDK สำหรับ iOS
- หากได้รับข้อความแจ้งให้อนุญาตให้ GoogleMapsDemos เข้าถึงตำแหน่งของคุณ ให้เลือกอนุญาต
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-31 UTC
[null,null,["อัปเดตล่าสุด 2025-08-31 UTC"],[[["\u003cp\u003eThis example showcases markers for Sydney, Melbourne, and Brisbane on a Google Map within an iOS app.\u003c/p\u003e\n"],["\u003cp\u003eTapping a marker reveals an info window, with a custom info window displayed for Sydney and Brisbane.\u003c/p\u003e\n"],["\u003cp\u003eUsers can run the full sample app locally by cloning the repository, installing dependencies, and building the project in Xcode.\u003c/p\u003e\n"],["\u003cp\u003eBefore running the app, obtain and configure a Google Maps API key within the project's source code.\u003c/p\u003e\n"]]],[],null,["This example displays markers on three major cities in Australia. When the user taps a marker, an info window appears.\n\nGet started\n\nBefore you can try the sample code, you must configure your development environment.\nFor more information, see [Maps SDK for iOS code samples](/maps/documentation/ios-sdk/examples).\n\nView the code \n\nSwift \n\n```swift\nimport GoogleMaps\nimport UIKit\n\nfinal class MarkerInfoWindowViewController: UIViewController {\n\n private let sydneyMarker = GMSMarker(\n position: CLLocationCoordinate2D(latitude: -33.8683, longitude: 151.2086))\n\n private let melbourneMarker = GMSMarker(\n position: CLLocationCoordinate2D(latitude: -37.81969, longitude: 144.966085))\n\n private let brisbaneMarker = GMSMarker(\n position: CLLocationCoordinate2D(latitude: -27.4710107, longitude: 153.0234489))\n\n private lazy var contentView: UIImageView = {\n return UIImageView(image: UIImage(named: \"aeroplane\"))\n }()\n\n override func loadView() {\n let cameraPosition = GMSCameraPosition(latitude: -37.81969, longitude: 144.966085, zoom: 4)\n let mapView = GMSMapView(frame: .zero, camera: cameraPosition)\n mapView.delegate = self\n view = mapView\n\n sydneyMarker.title = \"Sydney\"\n sydneyMarker.snippet = \"Population: 4,605,992\"\n sydneyMarker.map = mapView\n\n melbourneMarker.title = \"Melbourne\"\n melbourneMarker.snippet = \"Population: 4,169,103\"\n melbourneMarker.map = mapView\n\n brisbaneMarker.title = \"Brisbane\"\n brisbaneMarker.snippet = \"Population: 2,189,878\"\n brisbaneMarker.map = mapView\n }\n}\n\nextension MarkerInfoWindowViewController: GMSMapViewDelegate {\n func mapView(_ mapView: GMSMapView, markerInfoWindow marker: GMSMarker) -\u003e UIView? {\n if marker == sydneyMarker {\n return contentView\n }\n return nil\n }\n\n func mapView(_ mapView: GMSMapView, markerInfoContents marker: GMSMarker) -\u003e UIView? {\n if marker == brisbaneMarker {\n return contentView\n }\n return nil\n }\n\n func mapView(_ mapView: GMSMapView, didCloseInfoWindowOf marker: GMSMarker) {\n showToast(message: \"Info window for marker \\(marker.title ?? \"\") closed.\")\n }\n\n func mapView(_ mapView: GMSMapView, didLongPressInfoWindowOf marker: GMSMarker) {\n showToast(message: \"Info window for marker \\(marker.title ?? \"\") long pressed.\")\n }\n}\n\nextension UIViewController {\n func showToast(message: String) {\n let toast = UIAlertController(title: nil, message: message, preferredStyle: .alert)\n present(\n toast, animated: true,\n completion: {\n DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + .seconds(2)) {\n toast.dismiss(animated: true)\n }\n })\n }\n}https://github.com/googlemaps-samples/maps-sdk-for-ios-samples/blob/86408feffd008565cd2cafce8aff3dc27f1f41bb/GoogleMaps-Swift/GoogleMapsSwiftDemos/Swift/Samples/MarkerInfoWindowViewController.swift#L14-L87\n \n```\n\nObjective-C \n\n```objective-c\n#import \"GoogleMapsDemos/Samples/MarkerInfoWindowViewController.h\"\n\n#import \"GoogleMapsDemos/UIViewController+GMSToastMessages.h\"\n#import \u003cGoogleMaps/GoogleMaps.h\u003e\n\n@interface MarkerInfoWindowViewController () \u003cGMSMapViewDelegate\u003e\n\n@end\n\n@implementation MarkerInfoWindowViewController {\n GMSMarker *_sydneyMarker;\n GMSMarker *_melbourneMarker;\n GMSMarker *_brisbaneMarker;\n UIView *_contentView;\n}\n\n- (void)viewDidLoad {\n [super viewDidLoad];\n GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-37.81969\n longitude:144.966085\n zoom:4];\n GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];\n\n _sydneyMarker = [[GMSMarker alloc] init];\n _sydneyMarker.title = @\"Sydney\";\n _sydneyMarker.snippet = @\"Population: 4,605,992\";\n _sydneyMarker.position = CLLocationCoordinate2DMake(-33.8683, 151.2086);\n _sydneyMarker.map = mapView;\n NSLog(@\"sydneyMarker: %@\", _sydneyMarker);\n\n _melbourneMarker.map = nil;\n _melbourneMarker = [[GMSMarker alloc] init];\n _melbourneMarker.title = @\"Melbourne\";\n _melbourneMarker.snippet = @\"Population: 4,169,103\";\n _melbourneMarker.position = CLLocationCoordinate2DMake(-37.81969, 144.966085);\n _melbourneMarker.map = mapView;\n NSLog(@\"melbourneMarker: %@\", _melbourneMarker);\n\n _brisbaneMarker.map = nil;\n _brisbaneMarker = [[GMSMarker alloc] init];\n _brisbaneMarker.title = @\"Brisbane\";\n _brisbaneMarker.snippet = @\"Population: 2,189,878\";\n _brisbaneMarker.position = CLLocationCoordinate2DMake(-27.4710107, 153.0234489);\n _brisbaneMarker.map = mapView;\n NSLog(@\"brisbaneMarker: %@\", _brisbaneMarker);\n\n _contentView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@\"aeroplane\"]];\n\n mapView.delegate = self;\n self.view = mapView;\n}\n\n#pragma mark GMSMapViewDelegate\n\n- (UIView *)mapView:(GMSMapView *)mapView markerInfoWindow:(GMSMarker *)marker {\n if (marker == _sydneyMarker) {\n return _contentView;\n }\n return nil;\n}\n\n- (UIView *)mapView:(GMSMapView *)mapView markerInfoContents:(GMSMarker *)marker {\n if (marker == _brisbaneMarker) {\n return _contentView;\n }\n return nil;\n}\n\n- (void)mapView:(GMSMapView *)mapView didCloseInfoWindowOfMarker:(GMSMarker *)marker {\n NSString *message =\n [NSString stringWithFormat:@\"Info window for marker %@ closed.\", marker.title];\n [self gms_showToastWithMessage:message];\n}\n\n- (void)mapView:(GMSMapView *)mapView didLongPressInfoWindowOfMarker:(GMSMarker *)marker {\n NSString *message =\n [NSString stringWithFormat:@\"Info window for marker %@ long pressed.\", marker.title];\n [self gms_showToastWithMessage:message];\n}\n\n@end \nhttps://github.com/googlemaps-samples/maps-sdk-for-ios-samples/blob/86408feffd008565cd2cafce8aff3dc27f1f41bb/GoogleMaps/GoogleMapsDemos/Samples/MarkerInfoWindowViewController.m#L16-L96\n\n \n```\n\nRun the full sample app locally\n\nThe Maps SDK for iOS sample app is available as a\n[download archive](https://github.com/googlemaps-samples/maps-sdk-for-ios-samples/archive/main.zip)\nfrom [GitHub](https://github.com/googlemaps-samples/maps-sdk-for-ios-samples/tree/main/GoogleMaps).\nFollow these steps to install and try the Maps SDK for iOS sample app.\n\n1. Run `git clone https://github.com/googlemaps-samples/maps-sdk-for-ios-samples.git` to clone the samples repository into a local directory.\n2. Open a terminal window, navigate to the directory where you cloned the sample files, and\n drill down into the GoogleMaps directory:\n\n Swift \n\n cd maps-sdk-for-ios-samples-main/GoogleMaps-Swift\n pod install\n open GoogleMapsSwiftDemos.xcworkspace\n\n Objective-C \n\n cd maps-sdk-for-ios-samples-main/GoogleMaps\n pod install\n open GoogleMapsDemos.xcworkspace\n\n3. In Xcode, press the compile button to [build the app](https://developer.apple.com/documentation/xcode/building-and-running-an-app) with the current scheme. The build produces an error, prompting you to enter your API key in the `SDKConstants.swift` file for Swift or`SDKDemoAPIKey.h` file for Objective-C.\n4. [Get an API key](/maps/documentation/ios-sdk/get-api-key) from your project with the [Maps SDK for iOS enabled](/maps/documentation/ios-sdk/cloud-setup#enabling-apis).\n5. Edit the `SDKConstants.swift` file for Swift or`SDKDemoAPIKey.h` file for Objective-C and paste your API key into the definition of either the `apiKey` or `kAPIKey` constant. For example: \n\n Swift \n\n ```scdoc\n static let apiKey = \"YOUR_API_KEY\"\n ```\n\n Objective-C \n\n ```objective-c\n static NSString *const kAPIKey = @\"YOUR_API_KEY\";\n ```\n6. In the `SDKConstants.swift` file (Swift) or`SDKDemoAPIKey.h` file (Objective-C), remove the following line, because it's used to register the user-defined issue: \n\n Swift \n\n ```text\n #error (Register for API Key and insert here. Then delete this line.)\n ```\n\n Objective-C \n\n ```text\n #error Register for API Key and insert here.\n ```\n7. Build and run the project. The iOS simulator window appears, showing a list of **Maps SDK Demos**.\n8. Choose one of the options displayed, to experiment with a feature of the Maps SDK for iOS.\n9. If prompted to allow GoogleMapsDemos to access your location, choose **Allow**."]]