ป้ายกำกับ: API

google maps: basicgoogle maps: basic

2014-07-122014-07-12| phunsanitphunsanit| 0 Comment | 07:00

พื้นฐานการสร้าง google maps จาก Maps JavaScript API

  1. เริ่มจาก ขอ Google API key ก่อน
  2. จากนั้นลองสร้าง code ง่าย ๆ ตามตัวอย่าง 
    .map {
	border: #c00000 solid thin;
	height: 100%;
	min-height: 500px;
}

    ส่วนนี้จะเป็น css class ที่ทำให้แน่ใจว่า พื้นที่แสดงแผนที่เห็นสูงอย่างน้อย 500 px เพราะว่าตัว google maps จะเอาความสูงของ div เอาไปใช้ ถ้าไม่กำหนดไว้ถึงสร้างแผนที่ได้ก็อาจจะมองไม่เห็น

  3. สร้างพื้นที่ไว้แสดงแผนที่ กำหนดให้ id=”mapA” 
    <div class="map" id="mapA"></div>
  4. สร้างแผนที่ 
    /* function createMaps */
function createMap(mapArea, position) {
 var latlng = new google.maps.LatLng(parseFloat(position.latitude), parseFloat(position.longitude));
 var infoWindow = new google.maps.InfoWindow;
 var map = new google.maps.Map(document.getElementById(mapArea), {
  "zoom": 8
 });

 map.setCenter(latlng);

 var marker = new google.maps.Marker({
  "map": map,
  "position": latlng,
 });

 infoWindow.open(map, marker);
 infoWindow.setContent('Latitude = ' + position.latitude + ', ' + ' longitude = ' + position.longitude);
 infoWindow.setPosition(latlng);
}

function initMap(defaultLatitude = 13.7651991, defaultLongitude = 100.5368694) {
 position = {
  "latitude": defaultLatitude,
  "longitude": defaultLongitude,
 };

 createMap('mapA', position);
}
  5. โหลด Google Maps APIs โดยใช้ 
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_API_KEY"></script>

    แทนที่ YOUR_API_KEY เป็น key ของเราเอง โดย callback= ตามด้วย function ที่ใช้สร้างแผนที่ หรือ function อื่น ๆ ที่จะให้ทำงานหลังโหลดเพจเสร็จ ตามตัวอย่างคือ function initMap จะไม่สร้างแผนที่โดยตรงแต่จะใช้ function createMap สร้างให้อีกที ถ้าต้องการสร้างแผนที่เพิ่ม แค่เรียกใช้

    createMap('พื้นที่แสดงแผนที่', {
 "latitude": ค่า latitude,
 "longitude": ค่า longitude,
});

    ก็จะมีแผนที่ที่มีหน้าตาคล้าย ๆ อีกอันเพิ่มขึ้นมา

ดูตัวอย่างได้ที่ google maps: basic หรือจะลองสร้างไฟล์เอง

@charset "utf-8";
/* CSS Document */
.map {
	border: #c00000 solid thin;
	height: 100%;
	min-height: 500px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps APIs > Maps JavaScript API > Simple Map</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="map" id="mapA"></div>
<script>
/* function createMaps */
function createMap(mapArea, position) {
 var latlng = new google.maps.LatLng(parseFloat(position.latitude), parseFloat(position.longitude));
 var infoWindow = new google.maps.InfoWindow;
 var map = new google.maps.Map(document.getElementById(mapArea), {
  "zoom": 8
 });

 map.setCenter(latlng);

 var marker = new google.maps.Marker({
  "map": map,
  "position": latlng,
 });

 infoWindow.open(map, marker);
 infoWindow.setContent('Latitude = ' + position.latitude + ', ' + ' longitude = ' + position.longitude);
 infoWindow.setPosition(latlng);
}

function initMap(defaultLatitude = 13.7651991, defaultLongitude = 100.5368694) {
 position = {
  "latitude": defaultLatitude,
  "longitude": defaultLongitude,
 };

 createMap('mapA', position);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyDE5zb4r9sbN5S_GcD3NZRED1Ma3FzFqso"></script>
</body>
</html>

การกำหนด function ให้ทำงานหลังโหลดเพจเสร็จนอกจากใช้ตัวแปร callback แล้วยังสามารถใช้

google.maps.event.addDomListener(window, 'load', initMap);

ได้เหมือนกัน

อ่านเพิ่มเติม

Read MoreRead More