เพิ่มภาพ Complex Marker บน Google Maps JavaScript API v3

ตัวอย่างการใช้งาน Google Maps JavaScript API v3 ในการวางรูปภาพ Complex Marker ด้วยภาพกราฟิกนามสกุล png ลงไปใน Google Maps ให้น่าสนใจกว่า Marker ตัวเดิมวิธีการไม่ยากครับ แค่หาภาพมาวางซ้อน นามสกุล .png ก็พอ

สร้างไฟล์ index.html ขึ้นมา แล้วใส่ Code ดังนี้ครับ

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Heroes of Google Maps</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

function initialize() {
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(13.577082,100.590107)
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);

  setMarkers(map, beaches);
}

var beaches = [
  ['Bahamut', 13.607783,100.595085, 4],
  ['Heroes Company', 13.611453,100.549423, 5],
  ['River Battles', 13.577082,100.590107, 3],
  ['Temple of Dooms', 13.57508,100.573284, 2],
  ['Dragon Clan', 13.602277,100.559036, 1]
];

function setMarkers(map, locations) {

  var image = {
    url: 'images/heroes.png',
    size: new google.maps.Size(90, 39),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(0, 39)
  };

  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Heroes of Google Maps</title>

<style>

html, body, #map-canvas {

height: 100%;

margin: 0px;

padding: 0px

}

</style>

function initialize() {

var mapOptions = {

zoom: 15,

center: new google.maps.LatLng(13.577082,100.590107)

}

var map = new google.maps.Map(document.getElementById('map-canvas'),

mapOptions);

setMarkers(map, beaches);

}

var beaches = [

['Bahamut', 13.607783,100.595085, 4],

['Heroes Company', 13.611453,100.549423, 5],

['River Battles', 13.577082,100.590107, 3],

['Temple of Dooms', 13.57508,100.573284, 2],

['Dragon Clan', 13.602277,100.559036, 1]

];

function setMarkers(map, locations) {

var image = {

url: 'images/heroes.png',

size: new google.maps.Size(90, 39),

origin: new google.maps.Point(0,0),

anchor: new google.maps.Point(0, 39)

};

var shape = {

coord: [1, 1, 1, 20, 18, 20, 18 , 1],

type: 'poly'

};

for (var i = 0; i < locations.length; i++) {

var beach = locations[i];

var myLatLng = new google.maps.LatLng(beach[1], beach[2]);

var marker = new google.maps.Marker({

position: myLatLng,

map: map,

icon: image,

shape: shape,

title: beach[0],

zIndex: beach[3]

});

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>

</body>

</html>

ทดสอบนะครับ จะเห็นว่า ตัวอย่างที่ทำให้จะทำงานแบบนี้ครับ

โคตรง่าย เพราะผมไม่ได้เขียนอะไรใหม่เลย นอกจากขนาด Width และ Height ของภาพกราฟิกผมแค่นั้นครับ

var image = {
    url: 'images/heroes.png',
//90 คือขนาด Width ภาพ, 39 คือขนาด Height ภาพ
    size: new google.maps.Size(90, 39),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(0, 39)
  };