jQueryでGoogle Map API Version3のカスタムマーカーを作る

holydesign

2010-10-04 22:29:23

License: MIT License

Fork: 2

Fav: 0

View: 3478

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 173 lines
HTML 2 lines
CSS 32 lines

jQueryでカスタムマーカーを作る。
山手線の適当な賃貸相場を表示します。
金額は適当です、鵜呑みにしないでください。

jQueryでGoogle Map API Version3のカスタムマーカーを作る
jQuery v1.4.2

(function($) {

this.stationStore = [
{"lineID": "11302","stationID": "1130201","typeName": "JR","lineName": "JR山手線","stationName": "大崎","pref": "13","lng": 139.728439,"lat": 35.619772,"avgCost": 190942},
{"lineID": "11302","stationID": "1130202","typeName": "JR","lineName": "JR山手線","stationName": "五反田","pref": "13","lng": 139.723822,"lat": 35.625974,"avgCost": 225568},
{"lineID": "11302","stationID": "1130203","typeName": "JR","lineName": "JR山手線","stationName": "目黒","pref": "13","lng": 139.715775,"lat": 35.633923,"avgCost": 196594},
{"lineID": "11302","stationID": "1130204","typeName": "JR","lineName": "JR山手線","stationName": "恵比寿","pref": "13","lng": 139.71007,"lat": 35.646685,"avgCost": 297870},
{"lineID": "11302","stationID": "1130205","typeName": "JR","lineName": "JR山手線","stationName": "渋谷","pref": "13","lng": 139.701238,"lat": 35.658871,"avgCost": 208789},
{"lineID": "11302","stationID": "1130206","typeName": "JR","lineName": "JR山手線","stationName": "原宿","pref": "13","lng": 139.702592,"lat": 35.670646,"avgCost": 133355},
{"lineID": "11302","stationID": "1130207","typeName": "JR","lineName": "JR山手線","stationName": "代々木","pref": "13","lng": 139.702042,"lat": 35.683061,"avgCost": 257996},
{"lineID": "11302","stationID": "1130208","typeName": "JR","lineName": "JR山手線","stationName": "新宿","pref": "13","lng": 139.700464,"lat": 35.689729,"avgCost": 253119},
{"lineID": "11302","stationID": "1130209","typeName": "JR","lineName": "JR山手線","stationName": "新大久保","pref": "13","lng": 139.700261,"lat": 35.700875,"avgCost": 143432},
{"lineID": "11302","stationID": "1130210","typeName": "JR","lineName": "JR山手線","stationName": "高田馬場","pref": "13","lng": 139.703715,"lat": 35.712677,"avgCost": 172003},
{"lineID": "11302","stationID": "1130211","typeName": "JR","lineName": "JR山手線","stationName": "目白","pref": "13","lng": 139.706228,"lat": 35.720476,"avgCost": 183069},
{"lineID": "11302","stationID": "1130212","typeName": "JR","lineName": "JR山手線","stationName": "池袋","pref": "13","lng": 139.711086,"lat": 35.730256,"avgCost": 148602},
{"lineID": "11302","stationID": "1130213","typeName": "JR","lineName": "JR山手線","stationName": "大塚","pref": "13","lng": 139.728584,"lat": 35.731412,"avgCost": 163623},
{"lineID": "11302","stationID": "1130214","typeName": "JR","lineName": "JR山手線","stationName": "巣鴨","pref": "13","lng": 139.739303,"lat": 35.733445,"avgCost": 135260},
{"lineID": "11302","stationID": "1130215","typeName": "JR","lineName": "JR山手線","stationName": "駒込","pref": "13","lng": 139.748053,"lat": 35.736825,"avgCost": 290564},
{"lineID": "11302","stationID": "1130216","typeName": "JR","lineName": "JR山手線","stationName": "田端","pref": "13","lng": 139.761229,"lat": 35.737781,"avgCost": 128070},
{"lineID": "11302","stationID": "1130217","typeName": "JR","lineName": "JR山手線","stationName": "西日暮里","pref": "13","lng": 139.766857,"lat": 35.731954,"avgCost": 138110},
{"lineID": "11302","stationID": "1130218","typeName": "JR","lineName": "JR山手線","stationName": "日暮里","pref": "13","lng": 139.771287,"lat": 35.727908,"avgCost": 116876},
{"lineID": "11302","stationID": "1130219","typeName": "JR","lineName": "JR山手線","stationName": "鶯谷","pref": "13","lng": 139.778015,"lat": 35.721484,"avgCost": 199231},
{"lineID": "11302","stationID": "1130220","typeName": "JR","lineName": "JR山手線","stationName": "上野","pref": "13","lng": 139.777043,"lat": 35.71379,"avgCost": 235272},
{"lineID": "11302","stationID": "1130221","typeName": "JR","lineName": "JR山手線","stationName": "御徒町","pref": "13","lng": 139.774727,"lat": 35.707282,"avgCost": 235645},
{"lineID": "11302","stationID": "1130222","typeName": "JR","lineName": "JR山手線","stationName": "秋葉原","pref": "13","lng": 139.773288,"lat": 35.698619,"avgCost": 110601},
{"lineID": "11302","stationID": "1130223","typeName": "JR","lineName": "JR山手線","stationName": "神田","pref": "13","lng": 139.770641,"lat": 35.691173,"avgCost": 227820},
{"lineID": "11302","stationID": "1130224","typeName": "JR","lineName": "JR山手線","stationName": "東京","pref": "13","lng": 139.766103,"lat": 35.681391,"avgCost": 213959},
{"lineID": "11302","stationID": "1130225","typeName": "JR","lineName": "JR山手線","stationName": "有楽町","pref": "13","lng": 139.763806,"lat": 35.675441,"avgCost": 124975},
{"lineID": "11302","stationID": "1130226","typeName": "JR","lineName": "JR山手線","stationName": "新橋","pref": "13","lng": 139.758587,"lat": 35.666195,"avgCost": 210187},
{"lineID": "11302","stationID": "1130227","typeName": "JR","lineName": "JR山手線","stationName": "浜松町","pref": "13","lng": 139.757135,"lat": 35.655391,"avgCost": 195081},
{"lineID": "11302","stationID": "1130228","typeName": "JR","lineName": "JR山手線","stationName": "田町","pref": "13","lng": 139.747575,"lat": 35.645736,"avgCost": 107879},
{"lineID": "11302","stationID": "1130229","typeName": "JR","lineName": "JR山手線","stationName": "品川","pref": "13","lng": 139.738999,"lat": 35.62876,"avgCost": 174853}

];

}($));

(function($) {

$.fn.marker = function(options) {

var customMarker = {

//DOM要素
    _inner: null,
    _title: null,
    _content: null,
    _container: null,

setTitle: function(title) {
      this.set("title", title);
      this._title.html(title);
    },

getTitle: function() {
      return this.get("title");
    },

setContent: function(content) {
      this.set("content", content);
      this._content.html(content);
    },
    
    getContent: function() {
      return this.get("content");
    },

setPosition: function(position) {
      this.set("position", position);
      this.draw(); //再描画
    },

getPosition: function() {
      return this.get("position");
    },

//描画される際に実行される
    draw: function() {
      var title = this.get("title");
      var content = this.get("content");
      var position = this.get("position");

var projection = this.getProjection();
      var point = projection.fromLatLngToDivPixel(position);
  
      var height = $(this._container).outerHeight();
      var width =  $(this._container).outerWidth() / 2;
  
      var top  = point.y - (height);
      var left = point.x - (width);
  
      this._title.html(title);
      this._content.html(content);
      this._container.css({"top": top, "left": left});
    },

//マップ上にマーカーが追加された時に実行される
    onAdd: function() {
      var panes = this.getPanes();
      this.panel = panes.overlayImage;
      $(this.panel).append(this._container);
    },

//マップ上からマーカーが削除された時に実行される
    onRemove: function() {
      $(this._container).remove();
      delete this;
    }
  };

//DOMの操作
  customMarker._inner = $("<div/>").addClass("inner");
  customMarker._title = $("<div/>").addClass("title");
  customMarker._content = $("<div/>").addClass("content");
  customMarker._container = $("<div/>").addClass("marker");
  customMarker._inner.append(customMarker._title);
  customMarker._inner.append(customMarker._content);
  customMarker._container.append(customMarker._inner);

//OverlayViewクラスのサブクラス化
  //extendメソッドで、メソッドをオーバーライドする
  var overlayView = new google.maps.OverlayView();
  customMarker = $.extend(overlayView, customMarker);

//プロパティのセット
  for (var name in options) {
    var value = options[name];
    (name != "map") ? customMarker.set(name, value) : customMarker.setMap(value);
  }

return customMarker;
};

}($));

(function($) {

var markers = [];
  var map = $('#gmap').get().shift();

var gmap = new google.maps.Map(map, {
    "zoom": 13,
    "center": new google.maps.LatLng(35.619772, 139.728439),
    "mapTypeId": google.maps.MapTypeId.ROADMAP
  });

$(stationStore).each(function(index, station) {

var avg = station.avgCost.toString();
    var cost = '';
    for (var i = avg.length; i >= 0; i--) {
      cost = avg.charAt(i) + cost;
      if (i % 3 === 0 && (i === 0 || i === avg.length) === false) {
        cost = ',' + cost;
      }
    }

markers[index] = $.fn.marker({
      "map": gmap,
      "position": new google.maps.LatLng(station.lat, station.lng),
      "title": station.stationName,
      "content": "\\" + cost + "円"
    });
  });
  
}($));

jQueryでGoogle Map API Version3のカスタムマーカーを作る

jQueryでカスタムマーカーを作る。山手線の適当な賃貸相場を表示します。金額は適当です、鵜呑みにしないでください。(function($) { this.stationStore = [ {"lineID": "11302","stationID": "1130201","typeName": "JR","lineName": "JR山手線","stationName": "大崎","pref": "13","lng": 139.728439,"lat": 35.619772,"avgCost": 190942}, {"lineID": "11302","stationID": "1130202","typeName": "JR","lineName": "JR山手線","stationName": "五反田","pref": "13","lng": 139.723822,"lat": 35.625974,"avgCost": 225568}, {"lineID": "11302","stationID": "1130203","typeName": "JR","lineName": "JR山手線","stationName": "目黒","pref": "13","lng": 139.715775,"lat": 35.633923,"avgCost": 196594}, {"lineID": "11302","stationID": "1130204","typeName": "JR","lineName": "JR山手線","stationName": "恵比寿","pref": "13","lng": 139.71007,"lat": 35.646685,"avgCost": 297870}, {"lineID": "11302","stationID": "1130205","typeName": "JR","lineName": "JR山手線","stationName": "渋谷","pref": "13","lng": 139.701238,"lat": 35.658871,"avgCost": 208789}, {"lineID": "11302","stationID": "1130206","typeName": "JR","lineName": "JR山手線","stationName": "原宿","pref": "13","lng": 139.702592,"lat": 35.670646,"avgCost": 133355}, {"lineID": "11302","stationID": "1130207","typeName": "JR","lineName": "JR山手線","stationName": "代々木","pref": "13","lng": 139.702042,"lat": 35.683061,"avgCost": 257996}, {"lineID": "11302","stationID": "1130208","typeName": "JR","lineName": "JR山手線","stationName": "新宿","pref": "13","lng": 139.700464,"lat": 35.689729,"avgCost": 253119}, {"lineID": "11302","stationID": "1130209","typeName": "JR","lineName": "JR山手線","stationName": "新大久保","pref": "13","lng": 139.700261,"lat": 35.700875,"avgCost": 143432}, {"lineID": "11302","stationID": "1130210","typeName": "JR","lineName": "JR山手線","stationName": "高田馬場","pref": "13","lng": 139.703715,"lat": 35.712677,"avgCost": 172003}, {"lineID": "11302","stationID": "1130211","typeName": "JR","lineName": "JR山手線","stationName": "目白","pref": "13","lng": 139.706228,"lat": 35.720476,"avgCost": 183069}, {"lineID": "11302","stationID": "1130212","typeName": "JR","lineName": "JR山手線","stationName": "池袋","pref": "13","lng": 139.711086,"lat": 35.730256,"avgCost": 148602}, {"lineID": "11302","stationID": "1130213","typeName": "JR","lineName": "JR山手線","stationName": "大塚","pref": "13","lng": 139.728584,"lat": 35.731412,"avgCost": 163623}, {"lineID": "11302","stationID": "1130214","typeName": "JR","lineName": "JR山手線","stationName": "巣鴨","pref": "13","lng": 139.739303,"lat": 35.733445,"avgCost": 135260}, {"lineID": "11302","stationID": "1130215","typeName": "JR","lineName": "JR山手線","stationName": "駒込","pref": "13","lng": 139.748053,"lat": 35.736825,"avgCost": 290564}, {"lineID": "11302","stationID": "1130216","typeName": "JR","lineName": "JR山手線","stationName": "田端","pref": "13","lng": 139.761229,"lat": 35.737781,"avgCost": 128070}, {"lineID": "11302","stationID": "1130217","typeName": "JR","lineName": "JR山手線","stationName": "西日暮里","pref": "13","lng": 139.766857,"lat": 35.731954,"avgCost": 138110}, {"lineID": "11302","stationID": "1130218","typeName": "JR","lineName": "JR山手線","stationName": "日暮里","pref": "13","lng": 139.771287,"lat": 35.727908,"avgCost": 116876}, {"lineID": "11302","stationID": "1130219","typeName": "JR","lineName": "JR山手線","stationName": "鶯谷","pref": "13","lng": 139.778015,"lat": 35.721484,"avgCost": 199231}, {"lineID": "11302","stationID": "1130220","typeName": "JR","lineName": "JR山手線","stationName": "上野","pref": "13","lng": 139.777043,"lat": 35.71379,"avgCost": 235272}, {"lineID": "11302","stationID": "1130221","typeName": "JR","lineName": "JR山手線","stationName": "御徒町","pref": "13","lng": 139.774727,"lat": 35.707282,"avgCost": 235645}, {"lineID": "11302","stationID": "1130222","typeName": "JR","lineName": "JR山手線","stationName": "秋葉原","pref": "13","lng": 139.773288,"lat": 35.698619,"avgCost": 110601}, {"lineID": "11302","stationID": "1130223","typeName": "JR","lineName": "JR山手線","stationName": "神田","pref": "13","lng": 139.770641,"lat": 35.691173,"avgCost": 227820}, {"lineID": "11302","stationID": "1130224","typeName": "JR","lineName": "JR山手線","stationName": "東京","pref": "13","lng": 139.766103,"lat": 35.681391,"avgCost": 213959}, {"lineID": "11302","stationID": "1130225","typeName": "JR","lineName": "JR山手線","stationName": "有楽町","pref": "13","lng": 139.763806,"lat": 35.675441,"avgCost": 124975}, {"lineID": "11302","stationID": "1130226","typeName": "JR","lineName": "JR山手線","stationName": "新橋","pref": "13","lng": 139.758587,"lat": 35.666195,"avgCost": 210187}, {"lineID": "11302","stationID": "1130227","typeName": "JR","lineName": "JR山手線","stationName": "浜松町","pref": "13","lng": 139.757135,"lat": 35.655391,"avgCost": 195081}, {"lineID": "11302","stationID": "1130228","typeName": "JR","lineName": "JR山手線","stationName": "田町","pref": "13","lng": 139.747575,"lat": 35.645736,"avgCost": 107879}, {"lineID": "11302","stationID": "1130229","typeName": "JR","lineName": "JR山手線","stationName": "品川","pref": "13","lng": 139.738999,"lat": 35.62876,"avgCost": 174853} ]; }($)); (function($) { $.fn.marker = function(options) { var customMarker = { //DOM要素 _inner: null, _title: null, _content: null, _container: null, setTitle: function(title) { this.set("title", title); this._title.html(title); }, getTitle: function() { return this.get("title"); }, setContent: function(content) { this.set("content", content); this._content.html(content); }, getContent: function() { return this.get("content"); }, setPosition: function(position) { this.set("position", position); this.draw(); //再描画 }, getPosition: function() { return this.get("position"); }, //描画される際に実行される draw: function() { var title = this.get("title"); var content = this.get("content"); var position = this.get("position"); var projection = this.getProjection(); var point = projection.fromLatLngToDivPixel(position); var height = $(this._container).outerHeight(); var width = $(this._container).outerWidth() / 2; var top = point.y - (height); var left = point.x - (width); this._title.html(title); this._content.html(content); this._container.css({"top": top, "left": left}); }, //マップ上にマーカーが追加された時に実行される onAdd: function() { var panes = this.getPanes(); this.panel = panes.overlayImage; $(this.panel).append(this._container); }, //マップ上からマーカーが削除された時に実行される onRemove: function() { $(this._container).remove(); delete this; } }; //DOMの操作 customMarker._inner = $("<div/>").addClass("inner"); customMarker._title = $("<div/>").addClass("title"); customMarker._content = $("<div/>").addClass("content"); customMarker._container = $("<div/>").addClass("marker"); customMarker._inner.append(customMarker._title); customMarker._inner.append(customMarker._content); customMarker._container.append(customMarker._inner); //OverlayViewクラスのサブクラス化 //extendメソッドで、メソッドをオーバーライドする var overlayView = new google.maps.OverlayView(); customMarker = $.extend(overlayView, customMarker); //プロパティのセット for (var name in options) { var value = options[name]; (name != "map") ? customMarker.set(name, value) : customMarker.setMap(value); } return customMarker; }; }($)); (function($) { var markers = []; var map = $('#gmap').get().shift(); var gmap = new google.maps.Map(map, { "zoom": 13, "center": new google.maps.LatLng(35.619772, 139.728439), "mapTypeId": google.maps.MapTypeId.ROADMAP }); $(stationStore).each(function(index, station) { var avg = station.avgCost.toString(); var cost = ''; for (var i = avg.length; i >= 0; i--) { cost = avg.charAt(i) + cost; if (i % 3 === 0 && (i === 0 || i === avg.length) === false) { cost = ',' + cost; } } markers[index] = $.fn.marker({ "map": gmap, "position": new google.maps.LatLng(station.lat, station.lng), "title": station.stationName, "content": "\\" + cost + "円" }); }); }($)); <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <div id='gmap'></div>#gmap { width: 600px; height: 400px; } .marker { text-align: center; position: absolute; line-height: 140%; background: url(http://holyshared.github.com/jsdo.it/jquery.marker/bgi_marker_arrow.gif) no-repeat center bottom; padding-bottom: 8px; width: 100px; } .marker .inner { color: #ffffff; background: #004993 url(http://holyshared.github.com/jsdo.it/jquery.marker/bgi_marker_body.jpg) no-repeat center top; padding: 10px 10px 5px 10px; width: auto; } .marker .title { font-size: 12px; width: auto; } .marker .content { width: auto; font-size: 14px; font-weight: bold; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/dAjQ/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/holydesign/dAjQ" title="jQueryでGoogle Map API Version3のカスタムマーカーを作る">jQueryでGoogle Map API Version3のカスタムマーカーを作る - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code