Tag Archives: google map

สร้างแผนที่ไว้ในเว็บไซต์ ด้วย Google map

Posted on by

กำหนดตำแหน่งของเราให้แสดงในแผนที่ Google Map
[code lang=”javascript”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>วิทยาลัยเฉลิมกาญจนา</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
</head>
<body>
<div id="map_canvas" style="background: #f5f5f5; width: 600px; height:550px;"></div>

<script type="text/javascript">

var ckc_pcb = new google.maps.LatLng( 16.3416218, 101.0902424 ); /* default location*/

function initialize() {
var myOptions = {
zoom: 12,
//center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP,
/*center: new google.maps.LatLng(13.741620721743634, 100.53290683890078),*/
disableDefaultUI: false,
streetViewControl: false,
navigationControl: true,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

defaultGeolocation();

function defaultGeolocation() {
map.setCenter(ckc_pcb);
setMarker(ckc_pcb);
}

function setMarker(initialLatLng) {

var opts = new Object;
opts.title = "วิทยาลัยเฉลิมกาญจนาเพชรบูรณ์ เลขที่ 333 หมู่ 8 ตำบลบ้านโตก อำเภอเมือง จังหวัดเพชรบูรณ์ 67000";
opts.position = initialLatLng;
opts.map = map;
var marker = new google.maps.Marker(opts);
}
}

$(document).ready(function() {
initialize();
});
</script>
</body>
</html>
[/code]

ตัวอย่าง : ckc_map_pcb

แผนที่แสดงตำแหน่งปัจจุบันของคุณใน google map

Posted on by
  1. กำหนดให้ sensor (เช่น GPS) ทำงาน
  2. อ่านตำแหน่งปัจจุบันเพื่อนำมาแสดงบนแผนที่
  3. ถ้าอ่านตำแหน่งปัจจุบันไม่ได้ ให้ใช้ค่า Default (ในที่นี้คือ กรุงเทพ)

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ทดสอบ geolocation + google map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
</head>
<body>
ตำแหน่งของฉัน:
<div id="geo_data"></div>
<div id="map_canvas" style="background: #f5f5f5; height:300px; width: 300px;"></div>
<script type="text/javascript">
var initialLocation;
var bangkok = new google.maps.LatLng(13.755716, 100.501589);
function initialize() {
var myOptions = {
zoom: 15,
//center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

// detect geolocation lat/lng
if ( navigator.geolocation ) {
navigator.geolocation.getCurrentPosition(function(location) {
var location = location.coords;
$("#geo_data").html(‘lat: ‘+location.latitude+'<br />long: ‘+location.longitude);
initialLocation = new google.maps.LatLng(location.latitude, location.longitude);
map.setCenter(initialLocation);
setMarker(initialLocation);
}, function() {
handleNoGeolocation();
});
} else {
handleNoGeolocation();
}

// no geolocation
function handleNoGeolocation() {
map.setCenter(bangkok);
setMarker(bangkok);
$("#geo_data").html(‘lat: 13.755716<br />long: 100.501589’);
}

// set marker
function setMarker(initialName) {
var marker = new google.maps.Marker({
draggable: true,
position: initialName,
map: map,
title: "คุณอยู่ที่นี่."
});
google.maps.event.addListener(marker, ‘dragend’, function(event) {
$("#geo_data").html(‘lat: ‘+marker.getPosition().lat()+'<br />long: ‘+marker.getPosition().lng());
});
}
}

$(document).ready(function() {
initialize();
});
</script>
</body>
</html>
[/code]

ตัวอย่าง : geo-ggmap
ที่มา : http://www.okvee.net