【2018年度版】Google Maps の APIキー を簡単に取得する – ねんでぶろぐ
Googleマップを表示させるには APIキー が必要です。 APIキーを取得する場合は 「Google Cloud Platform」で プロジェクトを作成し、プロジェクト内でAPIキーを作成・請求先アカウントを紐づけるという作業が必要です。 ここでは新しくプロジェクトを作成し、APIキー取得と請求先アカウントの設定方法を紹介します。 「Google Maps Platform の提供を開始 : Google マップのビジネス利用がさらに進化 」 https://developers-jp.googleblog.com/2018/05/google-maps-platform-google.html 「Google Maps Platform」 https://cloud.google.com/maps-platform/ 準備 まず以下のものを用意してください。 ①Googleアカウン
サイトに埋め込んだGoogleマップの縮尺を変更＆CSSでレスポンシブ対応する方法
Googleマップからコードを取得してサイトに埋め込もうとしたのですが、以前とコードの内容が変わっていてどこを変更すれば縮尺が変わるのか皆目見当がつかず…。 と困っていましたが、現在は簡単に縮尺変更ができるようになりました。やっとページの更新ができて一安心です。（2018年3月22日 更新） 以前は&z=17など、「&z」を頼りに縮尺を変更していたのですが、Googleマップ上で縮尺変更してからコードを取得しても反映されず困っていました。しかし！偉大な先人がいらっしゃって無事解決できました。 縮尺変更だけではなんなので、レスポンシブ対応の方法も一緒にメモします。 目次 グーグルマップの縮尺を変更したいグーグルマップをレスポンシブ対応にしたい グーグルマップの縮尺を変更したい 今回は群馬県庁を例にして進めたいと思います。 記事の公開当時（2015年12月11日）はソースの中の数字を変更しない
Maps+: Googleマップを使いたいならこれで決まり！全画面表示で見やすく、経路検索もできる。無料。 | AppBank
使いやすいマップを探し求めて三千里。どうも、マミルトンです。ついに見つけました！Googleマップが使える究極のマップアプリMaps+を。最近、各所でも話題ですね。 このMaps+は、マップを全画面表示できるのでとっても見やすいんです。また、経路検索や現在地表示のアイコンを好きな位置にカスタマイズできます。自分の使うメニューだけを、使いやすいように配置できるのです。 他にも、歩いた道のログを記録できる「トラッキング機能」や、決まった位置でお知らせしてくれる「位置アラーム」などの機能もあります。 無料版ではブックマーク数が少なかったり、いくつかの制限があります。恐らく無料版のままでも大丈夫だと思いますが、物足りなかったら課金を検討してみてください。 さっそくこれらの機能について紹介していきます！ マップアプリまとめをチェック→マップアプリまとめ！それぞれの機能と特徴をまとめました。
iOS6でGoogleMapsをフルスクリーン表示にしてみました - W&R : Jazzと読書の日々
ただ、Webページに飛ぶだけなんですけどね。 普通にSafariでアクセスし、ホーム画面に追加。この方法はiPadだと、上の方にアドレスバーが残ってしまい、残念感が出てしまうんです。 iPhone/iPadのアイコンをカスタマイズするDraftPadアシスト - W&R : Jazzと読書の日々 URLスキームを使えることが前提です。iPhoneだけで手軽にURLスキームを調べる方法 QuickLaunchホーム画面に置くアイコンを自分の好みに変えてしまうアプリ。よくあるじゃないですか。上みた... それで、以前使ったホーム画面にショートカットを作る方法を応用し、GoogleMapsをフル画面にする呪文を作ってみました。 data:text/html;charset=UTF-8,<title>GoogleMaps</title><meta name=apple-mobile-web-app
jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた
なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ
Geocoding - 住所から緯度経度を検索
Geocoding.jpとは？ 住所やランドマーク名をGPS座標に変換するサービスです。 座標系はWGS84に対応。近似TOKYO97出力も可能です。 Open Location Code(OLC)取得も可能です。 Aobaが個人で作成、運用しています。 Google様とYahoo!様のふんどしで相撲をとっております。 お問い合わせはTwitter窓口まで。 検索のサンプルは？ 住所 『東京都港区芝公園４－２－８』 で検索 ランドマーク名 『東京タワー』 で検索 ランドマーク名 『東京駅』 で検索 ランドマーク名 『Arc de triomphe』（凱旋門） で検索 ランドマーク名 『ユニコーンガンダム』 で検索 Open Location Code 『8Q7XMP52+J6』（渋谷ハチ公像） で検索 緯度、経度から検索 『東京タワー』 経度、緯度から検索（度、分、秒） 『Eiffel T
地図上での図形描画 | Maps JavaScript API | Google for Developers
フィードバックを送信 地図上での図形描画 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 地図にオブジェクトを追加して、ポイント、ライン、領域、またはオブジェクトの集合を指定することができます。Google Maps JavaScript API ではこれらのオブジェクトをオーバーレイと呼びます。オーバーレイは緯度と経度で表される座標に紐付いているため、地図をドラッグしたりズームしたりすると連動して動きます。 オーバーレイのタイプ Maps JavaScript API には、プログラムで追加できる複数のタイプのオーバーレイがあります。 地図上の単一の場所は、マーカーを使用して表示されます。マーカーには、カスタム画像を表示できます（この場合、通常はアイコンと呼ばれます）。詳しくは、マーカーをご覧ください。 情報ウィンドウは、地図上の指定された場所でコンテン
Google マップのデザインが新しくなりました
メディア関係者向けお問い合わせ先 メールでのお問い合わせ: pr-jp@google.com メディア関係者以外からのお問い合わせにはお答えいたしかねます。 その他すべてのお問い合わせにつきましては、ヘルプセンターをご覧ください。
Google Maps API V3 基本的な使用方法と設定についてのまとめ
APIの呼び出し方からマーカークリックで情報ウィンドウを表示するまでの基本的な使い方について、オプション設定の仕方を含めてまとめてみた。 Webサイトへの導入 API呼び出すscriptタグとwindow.onloadで実行される関数書いて～という手順はV2とまったく同じ。 シンプルな地図を表示するサンプル 下記ソースを元に解説します。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google Maps JavaScript API v3 Example</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/jav
みんなの知識【ちょっと便利帳】 - 地図を作る = Google Maps クリエーター =
Google Maps(グーグルマップ)を使ってオリジナルの地図を作ります。無料で簡単に地図が作れます。マーカーや吹き出しを付けることもでき、地形図の表示もできます。みんなの知識【ちょっと便利帳】の一部です。*この地図上の操作で設定に反映されるのは、マーカーの位置と「+」「-」でのズームレベルのみです。その他は各種コントロールを設定したサンプルとしてご覧ください。 *この地図の大きさは、570ｘ350です。 ページを開いた時に表示される地図のタイプ： 地図の横幅： px 地図の縦幅： px 吹き出し(InfoWindow = 情報ウィンドウ)に表示する文章を入力する。 何も書かなければ吹き出しは表示されません。 改行をしたい場合は、 <br /> という文字を間に書いてください。 地図を開いた時に吹き出しを表示させる： チェックしなければマーカーをクリックした時に表示されます。
手軽になった！Google Maps API V3 (1/2)
Web上で地図を表示するツールの定番といえば「Googleマップ」。独自の地図を簡単に作れる「Google Maps API」を使って、会社案内のページに地図を埋め込んだり、地図と連動するネットサービスを運営している方も多いでしょう。 このGoogle Maps APIの新バージョン「Version 3」（以下V3と略）が5月27日に公開されました。今回は、V3を使って地図を表示する基本的な手順を紹介しましょう。 Google Maps API V3の主な変更点 Google Maps API V3では、以下の点が新しくなりました。 （1）API Keyが不要 V2まででは、Google Maps APIを使うためにはAPI Keyを取得する必要がありましたが、V3では不要になりました。 （2）iPhone／Androidへの対応 iPhoneやAndroidで地図を高速に表示できるように
サルでも出来るGoogleMaps（グーグルマップ)API GoogleMapsのふきだしにリンクを貼る
前回のマーカーにふきだしを付けるでは、マーカーをクリックすると、テキストを表示させることができました。 今回は一歩進んで、そのテキストにリンクを貼り、ホームページに移動させてみたいと思います。 今回使用するコードは前回のマーカーにふきだしを付けるとほとんど同じコードを使いますが、ふきだしを表示させるところにリンクを貼ることができるようになっています。 //大阪城 var marker = new GMarker(new GLatLng(34.685567, 135.527467)); map.addOverlay(marker); GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml("<center><br><a href=\"http://www.osakacastle.net/\"targe
Google Maps Anywhere (地図表示)
Error establishing a database connection This either means that the username and password information in your wp-config.php file is incorrect or we can't contact the database server at mysql5.sourceforge.jp. This could mean your host's database server is down. Are you sure you have the correct username and password? Are you sure that you have typed the correct hostname? Are you sure that the datab
はてなブログ | 無料ブログを作成しよう
来年も作りたい！ふきのとう料理を満喫した 2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…
Ajax Google Mapsを自サイトに設置する2 - ［JavaScript］All About
*この記事は、Google Maps APIバージョン1(v1)の時点での記事です。v1ベースでは現状動作しますが、バージョン2(v2)については、 Google Maps v2を設置する(1)やv2用意訳とサンプルなどもご参照ください。 前回は、「Google Mapsを自サイトに設置する」ということでとりあえず、自分のサイトに設置して場所をマークする「マーカー」を表示するところまで試してみました。 ( 設置の方法→Google Maps 設置までの流れ ) 今回は、その地図に影付きのフキダシでメッセージをポップアップする「情報ウインドウ」を表示してみます。たとえば、お店や会社の場所をマークする時などにこれを使えば、わかりやすい説明ができると思います。 今回もサンプルは、拙著、『入門Ajax』より引用しつつ解説してみます。 ただし、今回はまだ、Google Maps APIに用
MOONGIFT: » 各種地図Web APIを統一「Mapstraction」:オープンソースを毎日紹介
マッシュアップを作る際に最もよく使われるのが地図系のWeb API、特にGoogle Maps APIだ。地図はリアルとネットとをつなぐのに便利なツールで、ビジュアル的にも映えるので格好がいい。 そんな地図系APIであるが、数多く登場している。Google Maps、Yahoo! Maps、Virtual Earth（MS）、Multimap、Map24など。これがそれぞれ使い勝手が異なると開発者にとっては非常に面倒だ。Web APIの提供が終了してしまった場合のリスク回避も含めて、これを使ってみよう。 今回紹介するオープンソース・ソフトウェアはMapstraction、地図系Web APIをシームレスに扱うライブラリだ。 Mapstractionは先に挙げた各種Web APIについて、同じインタフェースで操作できるようにするライブラリだ。個別に実装された機能は難しいが、大枠では同じような
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Japan Quake Map
http://www5.ocn.ne.jp/~botan/map_g.html
Google Maps のパラメータ
ストリートビュー(GStreetviewPanorama) - Google Maps JavaScript API入門