HOME  »   チップス  »  Google Maps v3 API の使い方
チップス

Google Maps v3 API の使い方


HTMLタグ内でGoogle Maps ｖ3 APIを使用するには、Google Maps V3 API を使用する為に GoogleのサイトからJavaScriptコードを読み込みます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

＊　sensor: GPS情報を持つ携帯端末ならtrue、PCで利用する場合はfalse。

body要素で onload属性で initialize() を呼び出すと地図が表示されます。

<body onload="initialize()">

div要素を使って地図を表示するエリアを bodyタグ内に記述します。

<div id="map_canvas" style="width:300px; height:300px"></div>

googlemapslogo
sample.html

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript V3 API サンプル</title>
<script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
      var latlng = new google.maps.LatLng(38.2667202,140.8516019);
      var opt = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map
        (document.getElementById("map_canvas"), opt );
    }
</script>
</head>
<body onload="initialize()">
<p>Google Maps V3 APIを使った地図表示。</p>
<div align="center" id="map_canvas" style="width:500px; height:300px"><div>
</body>
</html>

Google Maps v3 API を使って、マーカーを指定した位置に表示する

マーカーを指定した位置に表示します。
marker.js

function initialize() {
// 中央　自宅
  var latlng = new google.maps.LatLng(38.2667202,140.8516019);
  var opt = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map
    (document.getElementById("map_canvas"), opt);
// SEIYU 八幡町店
  var m_position1 = new google.maps.LatLng(38.2705225,140.8499769);
  var marker1 = new google.maps.Marker({
    icon: { url:'http://hogehoge.com/marker1.gif' },
    position: m_position1,
    map: map
  });
// 仙台市 厚生病院
  var m_position2 = new google.maps.LatLng(38.2697431,140.8575763);
  var marker2 = new google.maps.Marker({
    icon: { url:'http://hogehoge.com/marker2.gif' },
    position: m_position2,
    map: map
  });
}

geomarker.html

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Markerを指定した位置に表示する google maps v3 api</title>
<script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
</script>
<script src="./marker.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Markerを指定した位置に表示</p>
<div align="center" id="map_canvas" style="width:500px; height:300px"><div>
</body>
</html>

Markerアイコンの作成

Markerアイコンの影の画像を作成する。

Shadowmaker

参考URL
[JavaScript] Google Maps API V3 でオリジナルのMarkerアイコンを追加してみた

サーバーにあるWebフォントで文字を画像変換してみる

りぃのフォント


   チップス