ストリートマップを開く:ウェブページへの地図の埋め込み (Google マップなど)

// Where you want to render the map.
var element = document.getElementById('osm-map');

// Height has to be set. You can do this in CSS too.
element.style = 'height:300px;';

// Create Leaflet map on map element.
var map = L.map(element);

// Add OSM tile leayer to the Leaflet map.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Target's GPS coordinates.
var target = L.latLng('47.50737', '19.04611');

// Set map's center to target with zoom 14.
map.setView(target, 14);

// Place a marker on the same location.
L.marker(target).addTo(map);

<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

仕様

OpenStreetMapsを使用します。
マップをターゲット GPS の中心に配置します。
ターゲットの GPS にマーカーを配置します。

注記：

CDN版を使用しましたリーフレットここですが、できますダウンロードファイルを作成して、独自のホストから提供して含めることができます。

mapstraction のを見てみましょう。これはあなたのコードを変更する必要はありませんしかしグーグル、OSM、ヤフーなどに基づいてマップを提供するために、より多くの柔軟性を与えることができます。

私はまた、 CloudMadeの開発ツールのを見てみましょう。彼らは美しくスタイルOSMベースマップサービス、OpenLayersをプラグイン、さらには自分の軽量、非常に高速なJavaScriptのマッピング・クライアントを提供します。彼らはまた、あなたが可能要件として挙げられ、独自のルーティングサービスを、ホストします。彼らは偉大なドキュメントとサンプルを持っています。

あなたはOpenLayersを（マップ用のjs API）を使用することができます。

の例では、OSMを埋め込む方法を示す自分のページににありますタイルます。

OSM マップを Web ページに埋め込みたいだけの場合、最も簡単な方法は、OSM Web サイトから iframe コードを直接取得することです。

表示したい地図に移動します https://www.openstreetmap.org
右側の「共有」アイコンをクリックし、「HTML」をクリックします。
結果の iframe コードを Web ページに直接コピーします。次のようになります。

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="https://www.openstreetmap.org/export/embed.html?bbox=-62.04673002474011%2C16.95487694424327%2C-61.60521696321666%2C17.196751341562923&amp;layer=mapnik" 
style="border: 1px solid black"></iframe>
<br/><small><a href="https://www.openstreetmap.org/#map=12/17.0759/-61.8260">View Larger Map</a></small>

もっと複雑なことをしたい場合は、OSM wiki を参照してください。独自のスリッピーマップのデプロイ".

あなたはJavascriptを恐れるならばそれを行うための簡単な方法があります...私はまだ学んでいます。オープンストリートは、カスタマイズ可能なプラグインの簡単なワードプレスを行います。 OSMウィジェットプラグインを追加します。

私は国勢調査局からcoverterのTIGERラインファイルを使用して、私はPythonのJava concotionを把握するまで、

これは、充填剤になります。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

ストリートマップを開く:ウェブページへの地図の埋め込み (Google マップなど)

シンプルな OSM スリッピー マップのデモ/例

コード

仕様

シンプルな OSM スリッピーマップのデモ/例