できれば寝て暮らしたい: javascript

ラベル javascript の投稿を表示しています。すべての投稿を表示

2013年4月12日金曜日

Google Map で指定した緯度経度からずらしてアイコンを表示したい

カスタムOverlayViewを使うと出来る。

function custom_marker(map, lat, lng) {
  this.lat_ = lat;
  this.lng_ = lng;
  this.setMap(map);
}

// OverlayView を継承
custom_marker.prototype = new google.maps.OverlayView();
// draw 処理
custom_marker.prototype.draw = function() {
  if (!this.div_) {
    // 出力したい要素を生成
    this.div_ = document.createElement("div");
    this.div_.style.position = "absolute";
    this.div_.innerHTML = "<img src='images/custom_marker.png' alt='' />";
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(this.div_);
  }
  // 緯度経度を Pixel に変換
  var point = this.getProjection().fromLatLngToDivPixel(
    new google.maps.LatLng(this.lat_, this.lng_)
  );
  // 100px ずらす
  this.div_.style.left = point.x - 100 + 'px';
  this.div_.style.top  = point.y - 100 + 'px';
}
// remove 処理
custom_marker.prototype.remove = function() {
  if (this.div_) {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
}

var cm = new custom_marker(map, 35.689487, 139.691706);

iOS端末の縦横判別

JavaScriptでiOSの縦横判別をする。

if (Math.abs(window.orientation) === 90) {
 // 横
} else {
 // 縦
}

2013年2月19日火曜日

Google Maps API V3 サンプル

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">google.load("jquery", "1.7");</script>
  <style>
   #map {
    width: 500px;
    height: 500px;
   }
  </style>
 </head>
 <body>
  <div id="map"></div>
 </body>
</html>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false®ion=JP" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
 //<![CDATA[

 var map;
 
 function init() {
  var latlng = new google.maps.LatLng(35.689487, 139.691706);
  var opts = {
   zoom: 11,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   center: latlng,
   navigationControlOptions: {
    position: google.maps.ControlPosition.LEFT_BOTTOM
   },
   overviewMapControl:true,
   overviewMapControlOptions: {
    opened: true
   }
  };
  map = new google.maps.Map($("#map").get(0), opts);
 }
 $(document).ready(function() {
  init();
 });

    //]]>
</script>

2013年1月24日木曜日

Google Maps JavaScript API V3 で KML の読み込み

jQuery のロードとか含めて以下の感じ。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false&region=JP" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
 //<![CDATA[
  $(document).ready(function() {
   var opts = {
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(35.00000, 135.00000)
   };
   map = new google.maps.Map($("#map").get(0), opts);
      var kmlLayer = new google.maps.KmlLayer("http://***/***.kml");
   kmlLayer.setMap(map);
  });
 //]]>
</script>