PlusMagi's Blog By Pitt Phunsanit

plus emotion magic to the knowledge of logic.

Tag Archive maps

  • Home   /  
  • Posts tagged "maps"

google maps: HTML5.Geolocation

คุณสมบัติใหม่ของ html5 คือ Geolocation API ช่วยให้ browser สามารถส่งตำแหน่งของตัวมันเองกลับไปให้ server ได้โดยใช้ตำแหน่ง gps หรือจากหมายเลข ip

แต่เพราะมันกระทบถึงความเป็นส่วนตัว ในการเขียนจึงต้องเผื่อว่า user ไม่อนุญาตให้ส่งตำแหน่งของตัวเองกลับมาไว้ด้วย ในตัวอย่างใช้ [code language=”javascript” title=”function getGeolocation”]/* get position from HTML5 Geolocation */
function getGeolocation() {
var position = false;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(successCallback, errorCallback) {

position = successCallback.coords;

document.getElementById(‘latitudeA’).innerHTML = successCallback.coords.latitude;
document.getElementById(‘longitudeA’).innerHTML = successCallback.coords.longitude;

}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
/*Browser doesn’t support Geolocation*/
handleLocationError(false, infoWindow, map.getCenter());

return false;
}

return position;
}[/code] ส่ง position กลับมา ให้[code language=”javascript” title=”function initMap”]function initMap(defaultLatitude = 13.7651991, defaultLongitude = 100.5368694) {
position = getGeolocation();

if (position == false || position == null || position === undefined || position.length <= 0 || typeof position == ‘undefined’) {
position = {
"latitude": defaultLatitude,
"longitude": defaultLongitude,
};
}

createMap(‘mapA’, position);
}[/code]แต่ถ้าหากไม่มีพิกัดส่งมา จะนำค่า default มาแสดงแทน

คุณสามารถดูตัวอย่างได้จาก google maps: HTML5.Geolocation หรือลองสร้างไฟล์ตามตัวอย่าง[code language=”html” title=”HTML5.Geolocation.html”]<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps APIs > Maps JavaScript API > HTML5 Geolocation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2">
<h3>HTML5 Geolocation</h3>
<dl>
<dt>latitude</dt>
<dd id="latitudeA"></dd>
<dt>longitude</dt>
<dd id="longitudeA"></dd>
</dl>
</div>
<div class="col-md-10 map" id="mapA"></div>
</div>
</div>
<script>
var infoWindow;
var map;
var position = false;

/* 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": 18
});

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);
}

/* get position from HTML5 Geolocation */
function getGeolocation() {
var position = false;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(successCallback, errorCallback) {

position = successCallback.coords;

document.getElementById(‘latitudeA’).innerHTML = successCallback.coords.latitude;
document.getElementById(‘longitudeA’).innerHTML = successCallback.coords.longitude;

}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
/*Browser doesn’t support Geolocation*/
handleLocationError(false, infoWindow, map.getCenter());

return false;
}

return position;
}

/* show error of HTML5 Geolocation */
function handleLocationError(browserHasGeolocation, infoWindow, position) {
infoWindow.setPosition(position);
infoWindow.setContent(browserHasGeolocation ?
‘Error: The Geolocation service failed.’ :
‘Error: Your browser doesn\’t support geolocation.’);
infoWindow.open(map);
}

function initMap(defaultLatitude = 13.7651991, defaultLongitude = 100.5368694) {
position = getGeolocation();

if (position == false || position == null || position === undefined || position.length <= 0 || typeof position == ‘undefined’) {
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>[/code]

google maps: basic

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

  1. เริ่มจาก ขอ Google API key ก่อน
  2. จากนั้นลองสร้าง code ง่ายๆ ตามตัวอย่าง[code language=”css” title=”maps styles”]
    .map {
    border: #c00000 solid thin;
    height: 100%;
    min-height: 500px;
    }[/code]ส่วนนี้จะเป็น css class ที่ทำให้แน่ใจว่า พื้นที่แสดงแผนที่เห็นสูงอย่างน้อย 500 px เพราะว่าตัว google maps จะเอาความสูงของ div เอาไปใช้ ถ้าไม่กำหนดไว้ถึงสร้างแผนที่ได้ก็อาจจะมองไม่เห็น
  3. สร้างพื้นที่ไว้แสดงแผนที่ กำหนดให้ id=”mapA”[code language=”html” title=”ส่วนแสดงแผนที่”]<div class="map" id="mapA"></div>[/code]
  4. สร้างแผนที่[code language=”javascript” title=”function javascript สร้างแผนที่”]/* 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);
    }[/code]

  5. โหลด Google Maps APIs โดยใช้[code language=”html”]<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_API_KEY"></script>[/code]แทนที่ YOUR_API_KEY เป็น key ของเราเอง โดย callback= ตามด้วย function ที่ใช้สร้างแผนที่ หรือ function อื่นๆ ที่จะให้ทำงานหลังโหลดเพจเสร็จ ตามตัวอย่างคือ function initMap จะไม่สร้างแผนที่โดยตรงแต่จะใช้ function createMap สร้างให้อีกที ถ้าต้องการสร้างแผนที่เพิ่ม แค่เรียกใช้[code language=”javascript” title=”วิธีสร้างแผนที่”]createMap(‘พื้นที่แสดงแผนที่’, {
    "latitude": ค่า latitude,
    "longitude": ค่า longitude,
    });[/code]ก็จะมีแผนที่ที่มีหน้าตาคล้ายๆอีกอันเพิ่มขึ้นมา

ดูตัวอย่างได้ที่ google maps: basic หรือจะลองสร้างไฟล์เอง[code language=”css” title=”styles.css”]@charset "utf-8";
/* CSS Document */
.map {
border: #c00000 solid thin;
height: 100%;
min-height: 500px;
}[/code][code language=”html” title=”Google Maps APIs > Maps JavaScript API > Simple Map”]<!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>[/code]

การกำหนด function ให้ทำงานหลังโหลดเพจเสร็จนอกจากใช้ตัวแปร callback แล้วยังสามารถใช้[code language=”javascript” title=”เรียก function หลังเพจโหลดเสร็จ”]google.maps.event.addDomListener(window, ‘load’, initMap);[/code]ได้เหมือนกัน

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

Proudly powered by WordPress | Theme: Appointment Blue by Webriti