【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アカウン
APIと少しのjQueryコードでGoogle Mapの地図の色を変更する - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Google MapのデザインをjQueryで変更する為のメモ書き。Google Map APIとjQueryでGoogle Mapの色合いを変更し、オリジナルのマーカーを付けてみます。こうする事で、既存デザインに合わせたGoogle Mapが出来ます。 今後必要になりそうだったので調べ物をしたついでにメモ書きです。デザインを変更、というと語弊がありますけど、好みの色に変えてみます。 ゴール ↓ こんな感じのをjQueryでやろう、みたいな内容です。特に目新しい情報では無いですが。 なんかシャドウ変になっちゃった・・色やマーカーだけでもWebサイトで使用している色にあわせれば地図だけ浮いてしまうような事も無くなるんじゃないかなと思います。 ジオコーディングリクエスト
Geekなぺーじ : 緯度/経度の取得
Google MAPS JavaScript APIを使って緯度と経度を取得するサンプルです。 クリックした位置の緯度と経度を表示します。 緯度/経度の数値取得に利用してください。 ソースコード 以下がソースコードです。 <!DOCTYPE html> <html> <head> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map { height: 100% } </style> <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script> <script type="text
Google Mapsマーカーから情報ウィンドウを表示
Google Maps API V3 で、追加したマーカーをクリックしたときに情報ウィンドウを表示させてみました。 Google公式のリファレンスを参考にしました。 Google Maps JavaScript API V3 リファレンス バージョン3はIE6 サポート対象外なのでお気をつけ下さい。 Markerに情報ウィンドウを表示させる 追加したMarkerに情報ウィンドウを表示してみました。 1. Mapクラスを生成 MapOptionsオブジェクトの設定して、Mapクラスの引数に指定します。 var op={ zoom:15, center:new google.maps.LatLng(35.507456,139.617585), mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(docum
Google Maps 入門
Google マップはグーグルが提供している地図サービスです。この Google マップをカスタマイズして独自のマーカーを表示させたり、指定した区間のルート検索を行ったりすることができるように色々な API が提供されています。ここでは Google マップで提供されている API の中でもウェブサイトで利用者が操作可能な地図をカスタマイズして表示することができる Google Maps JavaScript API の使い方の解説します。 ※ Google マップを利用者として使う場合の使い方については「Googleマップの使い方」を参照されて下さい。 なお JavaScript の基本的な使い方については「JavaScript入門」を参照されてください。
Google Maps API を使って、地図のカラーバリエーションを楽しもう。
こんにちは。Google マップのエンジニアリングを担当している池嶋です。今日は、Google Maps API を使って、地図の色を自由に変えられる裏技を紹介したいと思います。 まず、この地図を見てください。 通常の Google マップのように見えますが、全体の色が薄く、赤く色がついている場所があります。赤く色をつけたのは、Google マップのデータベースに「学校」と指定されている場所です。この地図を見ると、たくさんの学校がある事がわかります。 この地図は、特別に作ったデータではなく、先日 Google I/O でも紹介された、Google Maps API で色を変えられる機能を使って作りました。この機能を使うと、自由にカスタマイズした地図を作る事ができます。 例えば、大都市における鉄道や高速道路の分布を地図の上で見る事ができます。
Googleマップで探すグルメサイトを作ろう！ (1/5)
「確か、あのヘンだったはずなんだけどなぁ……」 かつて訪れたことのあるお店の情報を調べたいけど、正確な名前も住所も分からない。そんなとき、お店の情報がまとめて掲載されている地図があれば便利です。地図ならおおよその場所の記憶から、直感的に目的の情報へたどり着くことができます。たとえば、複数の飲食店の情報を提供する「グルメガイド」のようなサイトであれば重宝されることでしょう。 ヤフーが運営する「Yahoo！グルメ」も、そんな「地図から探す」機能を持つサイトのひとつ。同サイトに掲載されている飲食店の情報は、地図上ですぐに調べることができます。今回はこの技をお手本にしましょう。 今回のお手本サイト：『Yahoo！グルメ』 飲食店のクーポン券のダウンロードから、料理レシピの検索、さらには出前の注文までできる総合グルメサイト。掲載されている飲食店やレシピの情報は「グルメぴあ」「E・レシピ」など、複数の
ASCII.jp：Googleマップ＋jQueryで作るAjaxなデザイン｜29分でできる！ あのサイトの“技”を盗め
今やさまざまなWebサイトで使われ、すっかり地図の定番となったGoogleマップ。 コーポレートサイトや飲食店のサイトなどで、純粋に案内図としてページに埋め込むのが一般的ですが、中にはもっとおもしろい使い方で、ユーザーを楽しませているサイトもあります。 一例として、「hitotoki」というWebマガジンを紹介しましょう。hitotokiは、ある特定の場所に関するショートストーリーを地図と絡めて紹介するWebマガジンです。Googleマップをまるで独自に描いた絵地図のようにうまくサイトになじませ、「地理と文学を結びつけた町の文学地図」というコンセプトに合わせて効果的に活用しています。 今回は、このhitotokiのGoogleマップ活用法をお手本としましょう。 今回のお手本サイト： 『hitotoki―町の文学地図』 「場所」にまつわる読者の思い出を募り、地図と写真とともに紹介する投稿型の
手軽になった！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で地図を高速に表示できるように
Google Maps テンプレート（5）XML読み込み - Seis Pesos
※html と xml および画像を一括したパッケージのダウンロードはこちら。 （5）XML読み込み - Sample Google Mapsは専門知識のある人でないと出来ないのでは？ というような敷居の高さを感じないでもないですが、ここもなるべく平易なひながたにしています。 外部からXMLファイルを呼び出します。マーカーの数が多い場合など、用途はいろいろ＝XMLファイル・サンプル ・以下のテンプレートをコピーし、メモ帳などにペーストして★印の箇所を好きなように書き換えてください。「名前を付けて保存」するときは、文字コードを「UTF-8」とすることを忘れずに。 緯度（lat）と経度（lng）はこのツールで割り出してください。 注意： Google Page Creator（googlepages.com）でXMLを使うマップを作る場合、以下の記述に留意しましょう。 var xmlDoc
Google Maps API でマネタイズ
Google Maps API を利用したマッシュアップサイトで地図上に AdSense の広告を表示する方法をご存知ですか？Google Maps API には AdSense for Maps という機能があり、簡単に地域に合った広告を表示する機能があります。この機能の詳細はまだ日本語ドキュメントには記載されていませんが、ここで簡単にご紹介します。 AdSense for Maps では２つの方法で地図上に AdSense 広告を配信することができます。 ・ GoogleBar を使用し、ローカルビジネスの検索結果の横に広告を表示する ・ Maps Ad Unit を使用し Maps viewport に合わせて広告を表示する GoogleBar は数行のコードを追加するだけで Google Maps API を用いた地図に検索バーを追加する機能です。2009年3月にはこのGoogle
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
情報ウィンドウ｜Google Maps JavaScript API v3｜Ajax｜PHP & JavaScript Room
GoogleマップAPIの使い方を分かりやすく解説！ - Google Maps 活用講座
Ajax Google MapsにXMLデータを表示する [Javascript] All About