CSSで使えるマップのデザインをまとめてみました。
codepenから引用しています。
マップデザイン コピペで実装
よく見るような世界地図のみならず、一風変わった地図のデザイン等
何にどう使うかはあなた次第！というような地図のデザインをまとめてました
自分のサイトや好みに合った地図を選んでみてください！
WEB地球儀
シンプルな地球儀で世界各国が順番に点滅！？ ワールドワイドなサイトを作っている人などにおすすめ
See the Pen
Transparent 3D World Map in D3.js with SVG by Chris Laskey (@chrislaskey)
on CodePen.
丸い国
ドットと思いきや…？
See the Pen
Morphing land shapes to random circles by Jamie Popkin (@jamiepopkin)
on CodePen.
パステルマップ
パステルカラーでかわいい！ しかもドットで可愛さ倍増！
See the Pen
Svg World Map by DonSinDRom (@DonSinDRom)
on CodePen.
世界の昼と夜
世界の時間帯別日照時間がわかる！？ どこで使うかはあなた次第！
See the Pen
World daylight map by Paul Noble (@paulnoble)
on CodePen.
世界旅行
回転しているおしゃれな地球儀！ たまに飛んでいる飛行機も良いアクセントに！
See the Pen
Spinning Travel Globe by Jeff Ballweg (@jeffballweg)
on CodePen.
都市と都市のつながり
世界各国それぞれの場所が点線で分かる！ 地図も黒でかっこいい！
See the Pen
Animated Flights Map by Filip Defar (@dabrorius)
on CodePen.
黒白マップ
モノクロ地図でシンプルに！ ホバーすると？
See the Pen
SVG Map by wwwpcfr (@wwwpcfr)
on CodePen.
レーダー
レーダー地図！？ 地図をタップしてみると…？
See the Pen
radar scanning animation by sange (@sange)
on CodePen.
国別グラフマップ
黒い世界地図に大陸別の色とりどりの丸でカラフルに！ 丸の大きさで数の違いも一目瞭然！
See the Pen
Map with Bubbles by amCharts team (@amcharts)
on CodePen.
空港マップ
ある地点からの世界各国への道筋が見える！？
See the Pen
Map with curved lines by amCharts team (@amcharts)
on CodePen.
フライトマップ
世界各国の地点間の移動の仕方や時間がわかる！ これはすごい…
See the Pen
Airport Distance Map by Shaw (@shshaw)
on CodePen.
大陸マップ
かっこいい地図でおしゃれに！ 丸をタップすると…
See the Pen
PURE CSS INTERACTIVE MAP by Michael Mroz (@mirichan)
on CodePen.
自転と公転
地球儀がだ円形状に回転！ あなたならどう活用する？
See the Pen
3D revolving planet using CSS3 by Kushagra Gour (@chinchang)
on CodePen.
USA！！
一見ただの文字の羅列のように見えるが実は…
See the Pen
Beautiful Textual Map of the USA with CSS by Twikito (@Twikito)
on CodePen.
USA！！②
パステルカラーの6角形で描かれた地図
頭文字2つのアルファベットで表されている事でよりおしゃれに！
See the Pen
Interactive SVG US States Hexagon Map by Jake Albaugh (@jakealbaugh)
on CodePen.
アメリカ主要州マップ
ドットの部分にマウスを合わせると…
See the Pen
USA Map by Marco Biedermann (@marcobiedermann)
on CodePen.
スマホの街、街のスマホ
スマホ上の立体建物が！？ とてもかわいくおしゃれな地図
See the Pen
Interactive Map with Jquery by Sara B. (@sara_bianchi94)
on CodePen.
前に前に
三角のアイコンがまっすぐ進んでいく
See the Pen
Animated Driving GPS Background by Steven Kielbasa (@skielbasa)
on CodePen.
宇宙へ
世界地図のみならず宇宙まで！
See the Pen
Solar System Explorer in CSS only by Jamie Coulter (@jcoulterdesign)
on CodePen.
ココの写真は？
自分が紹介したい場所について写真付きで紹介できる！？
See the Pen
🌎 Interactive SVG World Map with Secret Surprise by Jeffrey Bennett 😃 (@PickJBennett)
on CodePen.
カラフルになった世界
これは一体… 面白い地球儀？
See the Pen
Random material generator with bump map by Xanmia (@Xanmia)
on CodePen.
【おまけ(マーカーアイコン)】
ふるふる
マウスをアイコン上に持っていくと…？ つい何度もやってしまいそうなマーカーアイコン
See the Pen
CSS Map Marker by Mehdi (@meduzen)
on CodePen.
検索のトップ表示にできます！
Googleの新機能を堪能しませんか？
いままでの様に、求人広告やリスティング広告に多額の費用を支払う時代はもう終わりました
2019年から始まった新しいサービス「Googleしごと検索」を活用することで、誰でも簡単にGoogleの巨大プラットフームを利用できるようになったのです！
『すべて無料』で始められます！