GoogleMapの簡単な埋め込み方法。アイコンやデザインのカスタマイズも！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じませんか？(◞‸◟) どーにかこれをうまくデザインできないだろうか(◞‸◟) ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و Googleマップを表示させよう まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝ Googleマップの設置 <script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを入れます&language=ja"> </script> headerタグAPIを取得するスクリプトをつけます。 APIの取得はこちらをご参照ください <div id="js-map-tae
新しいGoogle Mapsで地図の埋め込みが可能に
新しい、よりソーシャルに洗練されたGoogle Mapsが一般公開されてしばらくたちますが、なかなか使いづらい面があったのは、ウェブサイトなどに埋め込むことができないという制限があったためでした。 埋め込めないということは、地図を「ほら、これです」と紹介できないということなのですね。 しかしようやく、地図の埋め込み機能が追加され、世界中を紹介できるようになりました。また、この埋め込みには Google+ プロフィールも直結していますので、これまで以上の使い方がありそうです。### 新しい埋め込み機能を利用する 地図の埋め込みは、画面右下の歯車アイコンから行います。 あとはサイズを調整し、埋め込みコードを取得すればブログなどにそのまま貼り付けることができます。 注目したい新しいGoogle Mapsのルック＆フィール どうせですから、新しい埋め込みコードで、世界主要都市のGoogle Map
OpenStreetMapで地図タイルサーバーを構築する
OpenStreetMapで地図タイルサーバーを構築する OpenStreetMapはオープンソースの地理情報データを作成する事を目的としたプロジェクトで、 世界中の有志が地図を改善するために日々変更を加えています。 地図データはPlanet OSMで最新データが公開されていますが、 全データを導入するためにはハイスペックのサーバーと大容量のメモリが必要で、 参照するデータをSQLサーバーに入れるために最低でも数日間を要するため、 ベンチマーク情報が公開されているくらいです。 またダウンロードするデータ量も30GB近くあるため現実的ではありません。 そこで国別にデータが提供されている以下サイトよりデータを導入する事を推奨します。 http://download.geofabrik.de/asia.html 他の提供サイトについては以下URLを参照ください。 http://wiki.open
Geekなぺーじ : Google MAPS APIプログラミング
ここでは、Google Maps JavaScript API(version 3)を使って遊ぶ方法を説明したいと思います。 Google Maps JavaScript APIを使うと、グーグル社が提供する衛星写真や地図を使ってホームページ上で色々なものを作れます。 対象とする読者は初心者もしくは入門者です。 Google Maps APIはJavaScriptを使って書いてあるので、JavaScriptの知識があった方がわかりやすいと思いますが、Java Scriptがわからなくても何と無くわかるような説明を目指したいと思っています。 基本編 Google Maps APIの単純な例 地図の種類を切り替える 地図の中心を移動する 地図上にふきだしを表示 地図がクリックされたときの処理 マップタイプコントロールを無効にする 緯度経度取得ツール 要望が多いので緯度経度情報を取得するツールを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
