JA:OpenLayers Marker Example

これは OpenLayers の地図にマーカーを追加するための簡単な例です。

必要なコードは以下の通りです (以下を新しい HTML ファイルとしてコピーして、ブラウザで表示させます):

<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
          
    var zoom=16;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    
    markers.addMarker(new OpenLayers.Marker(lonLat));
    
    map.setCenter (lonLat, zoom);
  </script>
</body></html>

これはマーカーを置くのと地図をセンタリングするのに同じ lonLat オブジェクトを使っています。もうひとつの OpenLayers.LonLat オブジェクトとして newLonLat を定義すると、 markers.addMarker(new OpenLayers.Marker(newLonLat)); を使ってさらなるマーカーを追加できます。

iframe を使った手法

<iframe> タグを使って、より単純な HTML の断片にすることもできます。 "Export" タブを使って、"embeddable HTML" オプションを選ぶことで、必要な HTML を簡単に得られます。 iframe を使った手法はかなり制限されます。もし追加の javascript の技を試すことに興味があるなら、上述の OpenLayers の例がよりよい開始点です。

JA:OpenLayers Marker Example

iframe を使った手法

See also