maps – หน้า 2 – PlusMagi's Blog By Pitt Phunsanit

Byphunsanit

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

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

ส่วนนี้จะเป็น css class ที่ทำให้แน่ใจว่า พื้นที่แสดงแผนที่เห็นสูงอย่างน้อย 500 px เพราะว่าตัว google maps จะเอาความสูงของ div เอาไปใช้ ถ้าไม่กำหนดไว้ถึงสร้างแผนที่ได้ก็อาจจะมองไม่เห็น
สร้างพื้นที่ไว้แสดงแผนที่ กำหนดให้ id=”mapA”
?
ส่วนแสดงแผนที่
1
<div class="map" id="mapA"></div>

maps styles
1 2 3 4 5	`.map {` `border:` `#c00000` `solid` `thin;` `height:` `100%;` `min-height:` `500px;` `}`

ส่วนแสดงแผนที่
1	`<div` `class="map"` `id="mapA"></div>`

สร้างแผนที่

function javascript สร้างแผนที่
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28	`/* 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);` `}`

วิธีสร้างแผนที่
1 2 3 4	`createMap('พื้นที่แสดงแผนที่', {` `"latitude": ค่า latitude,` `"longitude": ค่า longitude,` `});`

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

styles.css
1 2 3 4 5 6 7	`@charset` `"utf-8";` `/* CSS Document */` `.map {` `border:` `#c00000` `solid` `thin;` `height:` `100%;` `min-height:` `500px;` `}`

Google Maps APIs > Maps JavaScript API > Simple Map
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42	`<!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 แล้วยังสามารถใช้

เรียก function หลังเพจโหลดเสร็จ
1	`google.maps.event.addDomListener(window,` `'load', initMap);`

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

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

Tag Archive maps