目次

Web地図ポータルサイト

サイト一覧

名称 埋め込み 作図データ 地図
表示 GPX KML GeoJSON データ
地理院地図 ○ ○ ○ XYZ
地理院地図 Vector ○ MVT
OpenStreetMap ○ XYZ
Google My Maps ○ ○ ○ API
Bing 地図 ○ API
Yahoo!地図

埋め込み表示

地理院地図

作図データは埋め込み表示できない。 

<iframe width="640" height="480"
src="https://maps.gsi.go.jp/?hc=hic#13/36.097208/138.306238/&base=std&disp=1&vs=c1j0h0k0l0u0t0z0r0s0m0f1"></iframe>

<html> <div style=“text-align:center;”> <iframe width=“640” height=“480” src=“https://maps.gsi.go.jp/?hc=hic#13/36.097208/138.306238/&base=std&disp=1&vs=c1j0h0k0l0u0t0z0r0s0m0f1”></iframe> </div> </html>

OpenStreetMap

中心の経度、緯度とズームレベルの代わりにbounding boxを指定する。 

<iframe width="640" height="480"
src="https://www.openstreetmap.org/export/embed.html?bbox=138.22946548461917%2C36.03882779541354%2C138.3827590942383%2C36.15547923128559&amp;layer=cyclemap"></iframe>

<html> <div style=“text-align:center;”> <iframe width=“640” height=“480” src=“https://www.openstreetmap.org/export/embed.html?bbox=138.22946548461917%2C36.03882779541354%2C138.3827590942383%2C36.15547923128559&amp;layer=cyclemap”></iframe> </div> </html>

Google My Maps

<iframe width="640" height="480"
src="https://www.google.com/maps/d/u/0/embed?mid=1O9XIrA5RgIMvnmMm4hZdoelMrZg8bFqn"></iframe>

<html> <div style=“text-align:center;”> <iframe width=“640” height=“480” src=“https://www.google.com/maps/d/u/0/embed?mid=1O9XIrA5RgIMvnmMm4hZdoelMrZg8bFqn”></iframe> </div> </html>

Bing 地図

<iframe width="640" height="480"
src="https://www.bing.com/maps/embed?h=480&w=640&cp=36.097208~138.306238&lvl=13&typ=d&sty=r&src=SHELL&FORM=MBEDV8">
</iframe>

<html> <div style=“text-align:center;”> <iframe width=“640” height=“480” src=“https://www.bing.com/maps/embed?h=480&w=640&cp=36.097208~138.306238&lvl=13&typ=d&sty=r&src=SHELL&FORM=MBEDV8”> </iframe> </div> </html>