Monday, July 11, 2005

ทดลอง google map api ใน blogspot

วันนี้ผมทดลองสมัครเข้าใช้บริการ google map api
โดย google map api ยอมให้ใช้ api
เฉพาะใน web site ที่สมัครเข้าใช้งานเท่านั้น
อย่างของผม ก็สมัครใช้ api
กับ url http://pphetra.blogspot.com
ได้ key ยืดยาวมาชุดหนึ่ง

เริ่มแรก ก็คือเราต้อง include api ในส่วน header ของ web page

<script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg" type="text/ja
vascript"></script>

จากนั้นก็กำหนดบริเวณ render map ด้วย div block

<div id="mymap" style="width: 400px; height: 400px"></div>


ทำการ new GMap Object ขึ้นมาด้วย javascript
if (GBrowserIsCompatible()) { 
var map = new GMap(document.getElementById("mymap"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(_SATELLITE_TYPE);
map.centerAndZoom(new GPoint(99.003489, 18.788563), 1);
}

Note: ค่า map type _SATELLITE_TYPE นั้นไม่ตรง
กับ api spec ซึ่งมีค่าเป็น G_SATELLITE_TYPE
ลองใช้ G_SATELLITE_TYPE แล้วทำงานไม่ถูกต้อง

ตัวอย่าง GPoint ที่ทดลองให้ดูนี้เป็นค่า latitude, longitude ของเมืองเขียงใหม่
บริเวณตลาดวโรรส
ถ้าใช้ google map ดู ก็จะมี url แบบนี้
http://maps.google.com/maps?ll=18.788563,99.003489&spn=0.008898,0.005922&t=k&hl=en

Note: ค่า latitude, longitude ใน url กับใน constructor ของ GPoint เรียงลำดับต่างกัน

จะเห็นได้ว่าวิธีใช้ google map Api นั้นง่ายๆ
แต่ประเด็นปัญหาก็คือ
เราไม่สามารถใส่ javascript
ลงไปใน post ของเราได้
(editor ของ blogger จะไม่ยอมให้เราใส่ tag javascript)
ก็เลยเดือนร้อนต้องหาวิธีการ embed javascirpt
ลงไปตอน post ให้ได้

วิธีการที่ใช้ก็คือ ห่อ javascript ที่ต้องการ
ลงไปใน div tag (โดยกำหนด style เป็น display:none)
จากนั้น ณ จังหวะที่ onload ของ page
ก็จัดการ scan หา div tag นัั้นๆ
แล้วก็สั่ง eval เจ้า javascript เสีย
function embedjs() {
var xs = document.getElementsByTagName("div");
var k = xs.length;
var maps = new Array(12);
var j = 0;
for (var i = 0; i < k; i++) {
if (xs[i].getAttribute("id") == "pokmap") {
maps[j++] = xs[i].innerHTML;
}
}

for (var i = 0; i < j; i++) {
eval(maps[i]);
}
}

Note : ให้ระวังอย่ายุบรวม for loop
scan กับ for loop evel เข้าด้วยกัน
เพราะว่าเมื่อเราเรียกเจ้า google map api
จะเกิดการ insert div ใหม่เข้ามา ผลลัพท์ก็คือ
จะเกิดวน loop ไม่รู้จบ

แก้ไขส่วน template เพิ่ม onload event
<body onload="embedjs()">


จากนั้นเวลา post ก็สามารถใส่ tag
ได้ดังนี้
<div id="123map" style="width: 400px; height: 400px">
</div>
<div id="pokmap" style="display: none;">if (GBrowserIsCompatible()) { var map =
new GMap(document.getElementById("123map")); map.addControl(new GSmallMapContro
l()); map.addControl(new GMapTypeControl()); map.setMapType(_SATELLITE_TYPE); ma
p.centerAndZoom(new GPoint(99.003489, 18.788563), 1);}</div>

ผลลัพท์ที่ได้ก็เป็นเช่นนี้


Related link from Roti

3 comments:

polawat phetra said...

แปลกดี ถ้าเราเรียกเข้ามาที่
post นี้โดยตรง
(http://pphetra.blogspot.com/2005/07/google-map-api-blogspot.html)
google map api จะไม่ทำงาน
แต่ถ้าเรียกจาก weekly archive
(http://pphetra.blogspot.com/2005_07_10_pphetra_archive.html)
สามารถทำงานได้

ok check คู่มือแล้ว
A single Maps API key is valid for a single "directory" on your web server

bact' said...

โห หลบด้วย div + eval นี่เจ๋งอ่ะ

คารวะ

morning_glory said...

นับถือๆ