Google Maps - คู่มือฉบับย่อ

Google Maps คืออะไร

Google Maps เป็นบริการทำแผนที่เว็บฟรีโดย Google ซึ่งให้ข้อมูลทางภูมิศาสตร์ประเภทต่างๆ การใช้ Google Maps สามารถทำได้

ค้นหาสถานที่หรือขอเส้นทางจากที่หนึ่งไปยังอีกที่หนึ่ง
ดูและนำทางผ่านภาพระดับถนนแบบพาโนรามาแนวนอนและแนวตั้งของเมืองต่างๆทั่วโลก
รับข้อมูลเฉพาะเช่นการจราจร ณ จุดใดจุดหนึ่ง

Google Maps มี API ที่คุณสามารถปรับแต่งแผนที่และข้อมูลที่แสดงบนแผนที่ได้ บทนี้จะอธิบายวิธีโหลด Google Map แบบง่ายบนหน้าเว็บของคุณโดยใช้ HTML และ JavaScript

ขั้นตอนในการโหลดแผนที่บนเว็บเพจ

ทำตามขั้นตอนด้านล่างเพื่อโหลดแผนที่บนหน้าเว็บของคุณ -

ขั้นตอนที่ 1: สร้างเพจ HTML

สร้างหน้า HTML พื้นฐานที่มีแท็ก head and body ตามที่แสดงด้านล่าง -

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

ขั้นตอนที่ 2: โหลด API

โหลดหรือรวม Google Maps API โดยใช้แท็กสคริปต์ดังที่แสดงด้านล่าง -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

ขั้นตอนที่ 3: สร้างคอนเทนเนอร์

ในการยึดแผนที่เราต้องสร้างองค์ประกอบคอนเทนเนอร์โดยทั่วไปแท็ก <div> (คอนเทนเนอร์ทั่วไป) จะใช้เพื่อจุดประสงค์นี้ สร้างองค์ประกอบคอนเทนเนอร์และกำหนดขนาดตามที่แสดงด้านล่าง -

<div id = "sample" style = "width:900px; height:580px;"></div>

ขั้นตอนที่ 4: ตัวเลือกแผนที่

ก่อนที่จะเริ่มต้นแผนที่เราต้องสร้างไฟล์ mapOptionsออบเจ็กต์ (สร้างขึ้นเช่นเดียวกับลิเทอรัล) และกำหนดค่าสำหรับตัวแปรการเริ่มต้นแผนที่ แผนที่มีสามตัวเลือกหลัก ได้แก่centre, zoomและ maptypeid.

centre- ภายใต้คุณสมบัตินี้เราต้องระบุตำแหน่งที่เราต้องการจัดกึ่งกลางแผนที่ เราต้องสร้างไฟล์LatLng วัตถุโดยส่งละติจูดและลองจิจูดของตำแหน่งที่ต้องการไปยังตัวสร้าง
zoom - ภายใต้คุณสมบัตินี้เราต้องระบุระดับการซูมของแผนที่
maptypeid- ภายใต้คุณสมบัตินี้เราต้องระบุประเภทของแผนที่ที่เราต้องการ ต่อไปนี้เป็นประเภทของแผนที่ที่ Google มีให้ -
- ROADMAP (ปกติแผนที่ 2D เริ่มต้น)
- ดาวเทียม (แผนที่ถ่ายภาพ)
- HYBRID (รวมสองประเภทขึ้นไป)
- TERRAIN (แผนที่ที่มีภูเขาแม่น้ำ ฯลฯ )

ภายในฟังก์ชันให้พูดว่า loadMap()สร้างอ็อบเจ็กต์ mapOptions และตั้งค่าที่ต้องการสำหรับ center, zoom และ mapTypeId ดังที่แสดงด้านล่าง

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

ขั้นตอนที่ 5: สร้างวัตถุแผนที่

คุณสามารถสร้างแผนที่โดยสร้างอินสแตนซ์คลาส JavaScript ที่เรียกว่า Map. ในขณะสร้างอินสแตนซ์คลาสนี้คุณต้องผ่านคอนเทนเนอร์ HTML เพื่อเก็บแผนที่และตัวเลือกแผนที่สำหรับแผนที่ที่ต้องการ สร้างวัตถุแผนที่ตามที่แสดงด้านล่าง

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

ขั้นตอนที่ 6: โหลดแผนที่

สุดท้ายโหลดแผนที่โดยเรียกใช้เมธอด loadMap () หรือโดยการเพิ่ม DOM listener

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีการโหลดแผนงานของเมืองที่ชื่อว่า Vishakhapatnam ด้วยค่าการซูม 12

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -

ในบทที่แล้วเราได้กล่าวถึงวิธีการโหลดแผนที่พื้นฐาน ที่นี่เราจะดูวิธีการเลือกประเภทแผนที่ที่ต้องการ

ประเภทของแผนที่

Google Maps มีแผนที่สี่ประเภท พวกเขาคือ -

ROADMAP- นี่คือประเภทเริ่มต้น หากคุณไม่ได้เลือกประเภทใด ๆ สิ่งนี้จะปรากฏขึ้น แสดงมุมมองถนนของภูมิภาคที่เลือก
SATELLITE - นี่คือประเภทแผนที่ที่แสดงภาพถ่ายดาวเทียมของพื้นที่ที่เลือก
HYBRID - ประเภทแผนที่นี้แสดงถนนสายหลักบนภาพถ่ายดาวเทียม
TERRAIN - นี่คือประเภทแผนที่ที่แสดงภูมิประเทศและพืชพันธุ์

ไวยากรณ์

หากต้องการเลือกประเภทแผนที่เหล่านี้คุณต้องระบุรหัสประเภทแผนที่ตามลำดับในตัวเลือกแผนที่ดังที่แสดงด้านล่าง -

var mapOptions = {
   mapTypeId:google.maps.MapTypeId.Id of the required map type
};

แผนงาน

ตัวอย่างต่อไปนี้แสดงวิธีการเลือกแผนที่ประเภท ROADMAP -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:9,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ดาวเทียม

ตัวอย่างต่อไปนี้แสดงวิธีการเลือกแผนที่ประเภท SATELLITE -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
                  center:new google.maps.LatLng(17.609993, 83.221436),
                  zoom:9,
                  mapTypeId:google.maps.MapTypeId.SATELLITE
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
		
   </head>
      
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ไฮบริด

ตัวอย่างต่อไปนี้แสดงวิธีการเลือกแผนที่ประเภท HYBRID -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:9,
               mapTypeId:google.maps.MapTypeId.Hybrid
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ภูมิประเทศ

ตัวอย่างต่อไปนี้แสดงวิธีการเลือกแผนที่ประเภท TERRAIN -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:9,
               mapTypeId:google.maps.MapTypeId.TERRAIN
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

เพิ่ม / ลดค่าการซูม

คุณสามารถเพิ่มหรือลดค่าการซูมของแผนที่ได้โดยแก้ไขค่าของไฟล์ zoom แอตทริบิวต์ในตัวเลือกแผนที่

ไวยากรณ์

เราสามารถเพิ่มหรือลดค่าการซูมของแผนที่ได้โดยใช้ตัวเลือกการซูม ด้านล่างนี้คือไวยากรณ์สำหรับเปลี่ยนค่าการซูมของแผนที่ปัจจุบัน

var mapOptions = {
   zoom:required zoom value
};

ตัวอย่าง: ซูม 6

รหัสต่อไปนี้จะแสดงแผนงานของเมือง Vishakhapatnam พร้อมค่าซูม 6

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่าง: ซูม 10

รหัสต่อไปนี้จะแสดงแผนงานของเมือง Vishakhapatnam พร้อมค่าซูม 10

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:10,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

โดยค่าเริ่มต้นชื่อเมืองและชื่อตัวเลือกที่ระบุบนแผนที่จะเป็นภาษาอังกฤษ หากต้องการเราสามารถแสดงข้อมูลดังกล่าวเป็นภาษาอื่นได้เช่นกัน กระบวนการนี้เรียกว่าlocalization. ในบทนี้เราจะเรียนรู้วิธีการแปลแผนที่

การแปลแผนที่

คุณสามารถปรับแต่ง (แปล) ภาษาของแผนที่ได้โดยระบุตัวเลือกภาษาใน URL ดังที่แสดงด้านล่าง

<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>

ตัวอย่าง

นี่คือตัวอย่างที่แสดงวิธีการแปล GoogleMaps คุณสามารถดูแผนงานของจีนที่แปลเป็นภาษาจีนได้ที่นี่

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(32.870360, 101.645508),
               zoom:9, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

เอาต์พุต

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

Google Maps มีอินเทอร์เฟซผู้ใช้พร้อมการควบคุมต่างๆเพื่อให้ผู้ใช้โต้ตอบกับแผนที่ เราสามารถเพิ่มปรับแต่งและปิดใช้งานการควบคุมเหล่านี้ได้

การควบคุมเริ่มต้น

นี่คือรายการของการควบคุมเริ่มต้นที่มีให้โดย Google Maps -

Zoom- หากต้องการเพิ่มและลดระดับการซูมของแผนที่เราจะมีแถบเลื่อนพร้อมปุ่ม + และ - ตามค่าเริ่มต้น แถบเลื่อนนี้จะอยู่ที่มุมซ้ายมือของแผนที่
Pan - เหนือแถบเลื่อนการซูมจะมีตัวควบคุมการแพนสำหรับการแพนแผนที่
Map Type- คุณสามารถค้นหาการควบคุมนี้ได้ที่มุมขวาบนของแผนที่ มันมีตัวเลือกประเภทแผนที่เช่นดาวเทียมแผนงานและภูมิประเทศ ผู้ใช้สามารถเลือกแผนที่ใดก็ได้เหล่านี้
Street view- ระหว่างไอคอนแพนและแถบเลื่อนซูมเรามีไอคอนเพ็กแมน ผู้ใช้สามารถลากไอคอนนี้และวางที่ตำแหน่งใดตำแหน่งหนึ่งเพื่อรับมุมมองถนน

ตัวอย่าง

นี่คือตัวอย่างที่คุณสามารถสังเกตการควบคุม UI เริ่มต้นที่ Google Maps มีให้ -

การปิดใช้งานการควบคุมเริ่มต้นของ UI

เราสามารถปิดใช้งานการควบคุม UI เริ่มต้นที่ Google Maps มีให้ได้ง่ายๆเพียงแค่สร้างไฟล์ disableDefaultUI ค่าจริงในตัวเลือกแผนที่

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีปิดใช้งานการควบคุม UI เริ่มต้นที่ Google Maps มีให้

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การเปิด / ปิดการใช้งานการควบคุมทั้งหมด

นอกเหนือจากการควบคุมเริ่มต้นเหล่านี้ Google Maps ยังมีการควบคุมอีกสามรายการตามรายการด้านล่าง

Scale- การควบคุมมาตราส่วนจะแสดงองค์ประกอบมาตราส่วนแผนที่ การควบคุมนี้ไม่ได้เปิดใช้งานโดยค่าเริ่มต้น
Rotate- การควบคุมการหมุนประกอบด้วยไอคอนวงกลมขนาดเล็กซึ่งช่วยให้คุณสามารถหมุนแผนที่ที่มีภาพเอียงได้ การควบคุมนี้จะปรากฏตามค่าเริ่มต้นที่มุมบนซ้ายของแผนที่ (ดู 45 °ภาพสำหรับข้อมูลเพิ่มเติม)
Overview- ในการเพิ่มและลดระดับการซูมของแผนที่เรามีแถบเลื่อนพร้อมปุ่ม + และ - โดยค่าเริ่มต้น แถบเลื่อนนี้อยู่ที่มุมซ้ายของแผนที่

ในตัวเลือกแผนที่เราสามารถเปิดและปิดการควบคุมใด ๆ ที่ Google Maps มีให้ดังที่แสดงด้านล่าง -

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

ตัวอย่าง

รหัสต่อไปนี้แสดงวิธีเปิดใช้งานการควบคุมทั้งหมด -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวเลือกการควบคุม

เราสามารถเปลี่ยนลักษณะของการควบคุม Google แผนที่โดยใช้ตัวเลือกการควบคุม ตัวอย่างเช่นการควบคุมการซูมสามารถลดหรือขยายขนาดได้ ลักษณะการควบคุม MapType สามารถเปลี่ยนแปลงได้ตามแถบแนวนอนหรือเมนูแบบเลื่อนลง ด้านล่างนี้คือรายการตัวเลือกการควบคุมสำหรับการควบคุมการซูมและ MapType

ซีเนียร์	ชื่อตัวควบคุม	ตัวเลือกการควบคุม
1	การควบคุมการซูม	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	การควบคุม MapType	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

ตัวอย่าง

ตัวอย่างต่อไปนี้สาธิตวิธีใช้ตัวเลือกการควบคุม -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -

ควบคุมตำแหน่ง

คุณสามารถเปลี่ยนตำแหน่งของตัวควบคุมได้โดยเพิ่มบรรทัดต่อไปนี้ในตัวเลือกการควบคุม

position:google.maps.ControlPosition.Desired_Position,

นี่คือรายการตำแหน่งที่มีอยู่ซึ่งสามารถวางการควบคุมบนแผนที่ได้ -

TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_TOP
RIGHT_TOP
LEFT_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีวางตัวควบคุม MapTypeid ที่ตรงกลางด้านบนของแผนที่และวิธีวางตัวควบคุมการซูมที่ตรงกลางด้านล่างของแผนที่

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -

เราสามารถวาดวัตถุบนแผนที่และผูกเข้ากับละติจูดและลองจิจูดที่ต้องการได้ สิ่งเหล่านี้เรียกว่าการซ้อนทับ Google Maps มีการวางซ้อนต่างๆตามที่แสดงด้านล่าง

Markers
Polylines
Polygons
วงกลมและสี่เหลี่ยมผืนผ้า
หน้าต่างข้อมูล
Symbols

ในการทำเครื่องหมายตำแหน่งเดียวบนแผนที่ Google Maps มีให้ markers. เครื่องหมายเหล่านี้ใช้สัญลักษณ์มาตรฐานและสัญลักษณ์เหล่านี้สามารถปรับแต่งได้ บทนี้จะอธิบายวิธีการเพิ่มเครื่องหมายและวิธีปรับแต่งทำให้เคลื่อนไหวและลบออก

การเพิ่มเครื่องหมายอย่างง่าย

คุณสามารถเพิ่มเครื่องหมายธรรมดาลงในแผนที่ในตำแหน่งที่ต้องการได้โดยสร้างอินสแตนซ์คลาสของเครื่องหมายและระบุตำแหน่งที่จะทำเครื่องหมายโดยใช้ latlng ดังที่แสดงด้านล่าง

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

ตัวอย่าง

รหัสต่อไปนี้กำหนดเครื่องหมายบนเมืองไฮเดอราบาด (อินเดีย)

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -

การเคลื่อนไหว Marker

หลังจากเพิ่มเครื่องหมายลงในแผนที่แล้วคุณสามารถไปเพิ่มเติมและเพิ่มภาพเคลื่อนไหวลงในแผนที่ได้เช่น bounce และ drop. ข้อมูลโค้ดต่อไปนี้แสดงวิธีเพิ่มภาพเคลื่อนไหวตีกลับและวางลงในเครื่องหมาย

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 

//To make the marker drop
animation:google.maps.Animation.Drop

ตัวอย่าง

รหัสต่อไปนี้กำหนดเครื่องหมายบนเมืองไฮเดอราบาดพร้อมเอฟเฟกต์ภาพเคลื่อนไหวเพิ่มเติม -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.377631, 78.478603),
               zoom:5
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -

การปรับแต่ง Marker

คุณสามารถใช้ไอคอนของคุณเองแทนไอคอนเริ่มต้นที่ Google Maps มีให้ เพียงตั้งค่าไอคอนเป็นicon:'ICON PATH'. และคุณสามารถทำให้ไอคอนนี้ลากได้โดยการตั้งค่าdraggable:true.

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีปรับแต่งเครื่องหมายเป็นไอคอนที่ต้องการ -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
				
            marker.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -

การถอด Marker

คุณสามารถลบเครื่องหมายที่มีอยู่ได้โดยตั้งค่าเครื่องหมายเป็น null โดยใช้ marker.setMap() วิธี.

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีการลบเครื่องหมายออกจากแผนที่ -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
				
            marker.setMap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -

ในบทที่แล้วเราได้เรียนรู้วิธีใช้เครื่องหมายใน Google Maps นอกจากเครื่องหมายแล้วเรายังสามารถเพิ่มรูปทรงต่างๆเช่นวงกลมรูปหลายเหลี่ยมสี่เหลี่ยมโพลีไลน์เป็นต้นในบทนี้จะอธิบายถึงวิธีการใช้รูปทรงที่ Google Maps มีให้

โพลีลีน

Polylines ซึ่งจัดทำโดย Google Maps มีประโยชน์ในการติดตามเส้นทางต่างๆ คุณสามารถเพิ่มโพลีไลน์ลงในแผนที่ได้โดยสร้างอินสแตนซ์ของคลาสgoogle.maps.Polyline. ในขณะที่สร้างอินสแตนซ์คลาสนี้เราต้องระบุค่าที่ต้องการของคุณสมบัติของ polyline เช่น StrokeColor, StokeOpacity และ strokeWeight

เราสามารถเพิ่มเส้นตรงลงในแผนที่ได้โดยส่งวัตถุไปยังเมธอด setMap(MapObject). เราสามารถลบโพลีไลน์ได้โดยส่งค่าว่างไปยังเมธอด SetMap ()

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงเส้นหลายเส้นที่เน้นเส้นทางระหว่างเมืองเดลีลอนดอนนิวยอร์กและปักกิ่ง

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(51.508742,-0.120850),
               zoom:3,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var tourplan = new google.maps.Polyline({
               path:[
                  new google.maps.LatLng(28.613939, 77.209021),
                  new google.maps.LatLng(51.507351, -0.127758),
                  new google.maps.LatLng(40.712784, -74.005941),
                  new google.maps.LatLng(28.213545, 94.868713) 
               ],
               
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2
            });
            
            tourplan.setMap(map);
            //to remove plylines
            //tourplan.setmap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

รูปหลายเหลี่ยม

รูปหลายเหลี่ยมใช้เพื่อเน้นพื้นที่ทางภูมิศาสตร์เฉพาะของรัฐหรือประเทศ คุณสามารถสร้างรูปหลายเหลี่ยมที่ต้องการได้โดยสร้างอินสแตนซ์ของคลาสgoogle.maps.Polygon. ในขณะที่สร้างอินสแตนซ์เราต้องระบุค่าที่ต้องการให้กับคุณสมบัติของรูปหลายเหลี่ยมเช่น path, strokeColor, strokeOapacity, fillColor, fillOapacity เป็นต้น

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีการวาดรูปหลายเหลี่ยมเพื่อเน้นเมืองไฮเดอราบาดนาคปุระและออรังกาบัด

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:4,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myTrip = [
               new google.maps.LatLng(17.385044, 78.486671),
               new google.maps.LatLng(19.696888, 75.322451), 
               new google.maps.LatLng(21.056296, 79.057803), 
               new google.maps.LatLng(17.385044, 78.486671)
            ];
            
            var flightPath = new google.maps.Polygon({
               path:myTrip,
               strokeColor:"#0000FF",
               strokeOpacity:0.8,
               strokeWeight:2,
               fillColor:"#0000FF",
               fillOpacity:0.4
            });
            
            flightPath.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

สี่เหลี่ยม

เราสามารถใช้รูปสี่เหลี่ยมเพื่อเน้นพื้นที่ทางภูมิศาสตร์ของพื้นที่ใดภูมิภาคหนึ่งหรือรัฐโดยใช้กล่องสี่เหลี่ยม เราสามารถมีสี่เหลี่ยมผืนผ้าบนแผนที่ได้โดยการสร้างอินสแตนซ์ของคลาสgoogle.maps.Rectangle. ในขณะที่สร้างอินสแตนซ์เราต้องระบุค่าที่ต้องการให้กับคุณสมบัติของสี่เหลี่ยมผืนผ้าเช่น path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds เป็นต้น

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีการเน้นพื้นที่เฉพาะบนแผนที่โดยใช้สี่เหลี่ยมผืนผ้า -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myrectangle = new google.maps.Rectangle({
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2,
               
               fillColor:"#0000FF",
               fillOpacity:0.4,
               map:map,
               
               bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(17.342761, 78.552432),
                  new google.maps.LatLng(16.396553, 80.727725)
               )
					
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
</html>

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -

แวดวง

เช่นเดียวกับรูปสี่เหลี่ยมเราสามารถใช้ Circles เพื่อเน้นพื้นที่ทางภูมิศาสตร์ของพื้นที่ใดภูมิภาคหนึ่งหรือรัฐโดยใช้วงกลมโดยการสร้างอินสแตนซ์ของชั้นเรียน google.maps.Circle. ในขณะที่สร้างอินสแตนซ์เราต้องระบุค่าที่ต้องการให้กับคุณสมบัติของวงกลมเช่น path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius เป็นต้น

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีการเน้นพื้นที่รอบนิวเดลีโดยใช้วงกลม -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(28.613939,77.209021),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
         
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
         
            var myCity = new google.maps.Circle({
               center:new google.maps.LatLng(28.613939,77.209021),
               radius:150600,
            
               strokeColor:"#B40404",
               strokeOpacity:0.6,
               strokeWeight:2,
            
               fillColor:"#B40404",
               fillOpacity:0.6
            });
				
            myCity.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

นอกจากเครื่องหมายรูปหลายเหลี่ยมโพลีไลน์และรูปทรงเรขาคณิตอื่น ๆ แล้วเรายังสามารถวาดหน้าต่างข้อมูลบนแผนที่ได้อีกด้วย บทนี้อธิบายวิธีการใช้หน้าต่างข้อมูล

การเพิ่มหน้าต่าง

หน้าต่างข้อมูลใช้เพื่อเพิ่มข้อมูลประเภทใดก็ได้ในแผนที่ ตัวอย่างเช่นหากคุณต้องการให้ข้อมูลเกี่ยวกับตำแหน่งบนแผนที่คุณสามารถใช้หน้าต่างข้อมูล โดยปกติหน้าต่างข้อมูลจะแนบมากับเครื่องหมาย คุณสามารถแนบหน้าต่างข้อมูลโดยการสร้างไฟล์google.maps.InfoWindowชั้นเรียน มีคุณสมบัติดังต่อไปนี้ -

Content - คุณสามารถส่งผ่านเนื้อหาของคุณในรูปแบบ String โดยใช้ตัวเลือกนี้
position - คุณสามารถเลือกตำแหน่งของหน้าต่างข้อมูลโดยใช้ตัวเลือกนี้
maxWidth- ตามค่าเริ่มต้นความกว้างของหน้าต่างข้อมูลจะถูกยืดออกไปจนกว่าข้อความจะถูกห่อ ด้วยการระบุ maxWidth เราสามารถ จำกัด ขนาดของหน้าต่างข้อมูลในแนวนอน

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีตั้งค่าเครื่องหมายและระบุหน้าต่างข้อมูลด้านบน -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

นอกจากเครื่องหมายรูปหลายเหลี่ยมโพลีไลน์และรูปทรงเรขาคณิตอื่น ๆ แล้วเรายังสามารถเพิ่มภาพเวกเตอร์ (สัญลักษณ์) ที่กำหนดไว้ล่วงหน้าบนแผนที่ได้อีกด้วย บทนี้จะอธิบายถึงวิธีการใช้สัญลักษณ์ที่ Google Maps มีให้

การเพิ่มสัญลักษณ์

Google มีรูปภาพ (สัญลักษณ์) แบบเวกเตอร์ต่างๆที่สามารถใช้กับเครื่องหมายหรือเส้น เช่นเดียวกับภาพซ้อนทับอื่น ๆ ในการวาดสัญลักษณ์ที่กำหนดไว้ล่วงหน้าเหล่านี้บนแผนที่เราต้องสร้างอินสแตนซ์ชั้นเรียนตามลำดับ ด้านล่างนี้เป็นรายการสัญลักษณ์ที่ Google กำหนดไว้ล่วงหน้าและชื่อชั้นเรียน -

Circle - google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (closed) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
Forward Pointing arrow (closed) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW
Forward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

สัญลักษณ์เหล่านี้มีคุณสมบัติดังต่อไปนี้ - path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity และ strokeWeight

ตัวอย่าง

ตัวอย่างต่อไปนี้สาธิตวิธีการวาดสัญลักษณ์ที่กำหนดไว้ล่วงหน้าบน Google Map

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
					
               draggable:true,
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -

การทำให้สัญลักษณ์เคลื่อนไหว

เช่นเดียวกับเครื่องหมายคุณสามารถเพิ่มภาพเคลื่อนไหวเช่นเด้งและวางลงในสัญลักษณ์ได้เช่นกัน

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีใช้สัญลักษณ์เป็นเครื่องหมายบนแผนที่และเพิ่มภาพเคลื่อนไหว -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
               
               animation:google.maps.Animation.DROP,
               draggable:true,
               map: map
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -

โปรแกรม Google Maps JavaScript สามารถตอบสนองต่อเหตุการณ์ต่างๆที่ผู้ใช้สร้างขึ้น บทนี้ให้ตัวอย่างการสาธิตวิธีดำเนินการจัดการเหตุการณ์ขณะทำงานกับ Google Maps

การเพิ่ม Listener เหตุการณ์

คุณสามารถเพิ่มตัวฟังเหตุการณ์โดยใช้วิธีการ addListener(). ยอมรับพารามิเตอร์เช่นชื่อออบเจ็กต์ที่เราต้องการเพิ่ม Listener ชื่อของเหตุการณ์และเหตุการณ์ตัวจัดการ

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีการเพิ่มตัวฟังเหตุการณ์ให้กับวัตถุเครื่องหมาย โปรแกรมจะเพิ่มค่าการซูมของแผนที่ขึ้น 5 ทุกครั้งที่เราดับเบิลคลิกที่เครื่องหมาย

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center: myCenter,
               zoom:5,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position: myCenter,
               title:'Click to zoom'
            });
            
            marker.setMap(map);
            
            //Zoom to 7 when clicked on marker
            google.maps.event.addListener(marker,'click',function() {
               map.setZoom(9);
               map.setCenter(marker.getPosition());
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -

การเปิดหน้าต่างข้อมูลเมื่อคลิก

รหัสต่อไปนี้จะเปิดหน้าต่างข้อมูลเมื่อคลิกที่เครื่องหมาย -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -

การลบ Listener

คุณสามารถลบผู้ฟังที่มีอยู่ได้โดยใช้วิธีการ removeListener(). วิธีนี้ยอมรับวัตถุ Listener ดังนั้นเราต้องกำหนด Listener ให้กับตัวแปรและส่งต่อไปยังเมธอดนี้

ตัวอย่าง

รหัสต่อไปนี้แสดงวิธีการลบผู้ฟัง -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            var myListener = google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
				
            google.maps.event.removeListener(myListener);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -