Tutorial Google maps ใช้รูปภาพแทนหมุด (Custom Marker Icon)

by tanomsak

var Icon = new GIcon();
Icon.image = "mymarker.png";
Icon.iconSize = new GSize(20, 34);
Icon.shadow = "myshadow.png";
Icon.shadowSize = new GSize(36, 34);
Icon.iconAnchor = new GPoint(5, 34);
Icon.infoWindowAnchor = new GPoint(5, 2);
Icon.transparent = "mytran.png";
Icon.imageMap=[9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0];
Icon.printImage = "mymarkerie.gif";
Icon.mozPrintImage = "mymarkerff.gif";
Icon.printShadow = "myshadow.gif";

• Pingback: Tutorial แบบบ้านๆ ตอนที่ 1 - Basic Google Maps API — tanomsak.com

• Pingback: การทำ Custom marker icon สำหรับ Google Static Maps — tanomsak.com

• pesadking

  ถ้าไม่อยากให้มีเงาทำยังไงเหรอคะ
  อ๋อถามอีกหน่อยคร้า คือมีค่าใน database เป็นพันเรคคอร์ด พอวาดปุ๊บ ie error แก้ไงคะ

• tanomsak

  ถ้าไม่อยากมีเงาไม่ต้องทำข้อ 3 ครับ คือไม่ต้องใส่ 2 บรรทัดนี้

  Icon.shadow = “myshadow.png”;
  Icon.shadowSize = new GSize(36, 34);

  error ใน IE เป็นยังไงครับ

• pesadking

  error ว่า สคริปในเพจนี้ ทำให้ ie รันช้า ประมาณนี้ค่ะ พอกด yes ปุ๊บก้อวาดจุดได้ แต่ยังมะได้เช็คว่ามันวาดครบหรือเปล่าค่ะ

• tanomsak

  ถ้าวาดทั้งพันจุดพร้อมๆกัน ก็อาจจะมีปัญหาครับเพราะใช้เมมโมรี่เยอะมากครับ

  ตั้งแสดงเฉพาะอันที่มองเห็นในแผนที่ครับ ลองดูแนวทางใน entry นี้ครับ http://www.tanomsak.com/index.php/2008/12/googl…

• ladda

  ตอนนี้กำลังทำเกี่ยวกับแผนที่ประเทศไทย เป็นแผนที่ที่สร้างขึ้นมาเองค่ะ ก็เอาจาก google map มาตัดต่อเอาแต่ประเทศไทย จะปักหมุดลงบนแผนที่ค่ะ เราสามารถใช้โค้ดของ google map มาใช้ได้เลยหรือเปล่าคะ? อย่างไรขอคำแนะนำด้วยนะคะ ขอบคุณมากค่ะ

• pesadking

  ขอบคุณมากคร้า

• tanomsak

  ผมคิดว่าการเอาแผนที่จาก Google maps มาไว้ใน server เราน่าจะผิด Term of Service นะครับ ส่วนเรื่องการใช้ API ผมคิดว่าคงจะแก้เยอะเหมือนกันครับ

• ladda

  พวกโค้ดนี้คือ เราสามารถนำมาใช้ได้เลยใช่ไหมคะ หรือว่าเป็น โค้ดนี้ต้องใช้ร่วมกับ map ของ google เท่านั้นคะ

• tibby

  อยากทราบว่า
  var message = ["abc"];

  ต้องเพิ่มตรงนี้ถึงจะกดได้>>>>> mark.value = number;

  GEvent.addListener(marker,”click”, function() {
  var myHtml = message; >>>> แบบนี้กดไม่ได้ ต้องมี number + message; ถึงจะได้ค่ะ
  map.openInfoWindowHtml(latlng, myHtml);
  });

  แล้วกด marker ไม่ทำงานค่ะ นอกจากจะใช้ event-closure (คือ ส่ง random ส่งไปหลายค่าพร้อม number) จะกดได้ค่ะ
  ขอบคุณมากค่ะ..

• tanomsak

  ทำไม message เป็น Array ล่ะครับ ลองเปลี่ยนเป็น

  var message = “abc”; ดูไหมครับ

  หรือว่า เปลี่ยน var myHtml = message; => var myHtml = message[0];

  ขอแนะนำให้ใช้ Firefox + Firebug Add-on ครับ ช่วย Debug javascript ดีมากๆครับ

• Ba_nana55

  ขอบคุณสำหรับความรู้ดีๆค่ะ

  พอดีเหนเว๊บๆ นึง http://yoink.com

  เขาใช้การรวม marker ว่าตำแหน่งนั้นๆ มีกี่จุด

  เลยอยากได้วิธีคิด และ วิธีทำอะค่ะ

  ยังงัยรบกวนช่วยดูให้ทีนะค่ะ ว่าพอจะมีวิธีทำหรือป่าว ขอบคุณค่ะ

• tanomsak

  เค้าเรียกว่า MarkerCluster ครับ ถ้าใช้ Google Maps API V3 ลองดูที่นี่ครับ

  http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/

• Tongta Tongjai

  เวลาปักมุด ครั้งนึงบนแผนที่ได้กี่อันหรอครับ

  พอดีเอาไปใช้ แล้วเวลามานเกิน 50 อัน แผนที่มานหายไปเลยอะครับ

  อยู่ที่ api ด้วยหรือเปล่า ครับ เพราะใช้แบบ ฟรีอยู่

• tanomsak

  ผมว่าไม่จำกัดนะครับ แต่ที่หายไปอาจจะเนื่องจาก script มันใช้ RAM เยอะมากจนหมดหน้าเวปมีปัญหาหรือเปล่าครับทดลองกับอะไรครับ IE หรือว่า Firefox, Chrome

  อีกอย่างถ้าจะแสดงหมุดเยอะๆ ลองใช้ AJAX แสดงเฉพาะที่อยู่ในแผนที่ที่เราเห็นจะเปลือง RAM น้อยกว่าครับ

• High_tactic

   รบกวนถามหน่อยนะครับบบ

  Google Maps By Olo_WaNtfunction initialize() {var map = new GMap2(document.getElementById(“map_canvas”));//ใส่ค่าละติจูด , ลองติจูด , ระยะการซูมmap.setCenter(new GLatLng(14.077817097589845, 100.60328722000122), 11);map.setUIToDefault();map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());// Create a base icon for all of our markers that specifies the// shadow, icon dimensions, etc.var baseIcon = new GIcon(G_DEFAULT_ICON);baseIcon.shadow = “http://www.google.com/mapfiles/shadow50.png”;baseIcon.iconSize = new GSize(20, 34);baseIcon.shadowSize = new GSize(37, 34);baseIcon.iconAnchor = new GPoint(9, 34);baseIcon.infoWindowAnchor = new GPoint(9, 2);// Creates a marker whose info window displays the letter corresponding// to the given index.function createMarker(point, index) {  // Create a lettered icon for this point using our icon class  var letter = String.fromCharCode(“A”.charCodeAt(0) + index);  var letteredIcon = new GIcon(baseIcon);  letteredIcon.image = “http://www.google.com/mapfiles/marker” + letter + “.png”;  // Set up our GMarkerOptions object  markerOptions = { icon:letteredIcon };  var marker = new GMarker(point, markerOptions);  GEvent.addListener(marker, “click”, function() {    marker.openInfoWindowHtml(“Marker ” + letter + ““);  });  return marker;}// Add 10 markers to the map at random locationsvar bounds = map.getBounds();var southWest = bounds.getSouthWest();var northEast = bounds.getNorthEast();var lngSpan = northEast.lng() – southWest.lng();var latSpan = northEast.lat() – southWest.lat();for (var i = 0; i < 10; i++) {  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),                          southWest.lng() + lngSpan * Math.random());  map.addOverlay(createMarker(point, i));}}คือจากโค้ดนีนะครับมันสามารถสร้างมาร์กเกอร์ได้ แต่ผมต้องการที่จะกำหนดไปเลยว่ามาร์กเกอร์ตัวนี้ให้จุดนี้ๆๆ ผมต้องแก้อย่างไรครับ ขอบคุณล่วงหน้าครับ