【Google Maps API】マーカー表示とオリジナル画像へのカスタマイズ
Google Maps API（Javascript API）について書く記事、第2弾です。 今回は「マーカー」の表示方法をご紹介します。 マーカーとは、地図上の場所を指し示すためのアイコンのことで、デフォルトでは下図のような赤いピンの形をしています。 Google Maps APIを使って表示させた地図にも、もちろんこのようなマーカーを自由に表示できます。 さらにオリジナルの画像をマーカーとして表示させるカスタマイズも可能です！ 当サイトの会社概要ページでは、グランフェアズ専用のマーカー画像を表示させています。 ということで当記事ではマーカーの表示方法について、「基礎編」とオリジナル画像への「カスタマイズ編」、2段構成にわけてお届けします。 基礎編： マーカーを表示してみよう まずは基本の記述内容を確認するため、デフォルトのマーカーを表示させるまでを見てみましょう。 サンプルコード全体
Googleマップのカスタマイズに挑戦してみた！
今回は初めてGoogleマップのカスタマイズに挑戦したので、備忘録としてやり方をまとめました。 カスタマイズできると知ってはいるけど難しそうで試したことない人も多いはず…そんな方は是非チェックしてみてください！ それではどうぞ！ Googleマップのカスタマイズをする意味 実店舗があるお店のサイトにとって、そのお店の行き方や場所が分かるマップは重要なコンテンツだと思います。初めてお店に行きたい時に、サイトにマップがあるととても分かりやすいですよね！ そんな時よく使われるのがGoogleマップです。ただサイトによってはマップとサイトデザインがあっておらず違和感を感じる場合もあります。 デザインをあわせるためにオリジナルの地図画像を作るという手もありますが、道が変更されたり、目印のお店が無くなったりするたびに変更しないといけないので正直あまり実用的ではありません。そこでオススメしたいのが、Go
【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アカウン
同一ページに複数のGooglemapの表示 - Google Maps入門
地図を表示するにはgoogle.maps.Mapクラスを使います。ここではMapクラスを使って地図を作成する方法について解説します。 1.Mapクラス 2.MapOptionsクラス 3.setOptionsメソッドを使って座標などをあとから設定する 4.1つのWebページに複数の地図を表示する 5.サンプルコード Mapクラス 地図を作成するにはgoogle.maps.Mapクラスを使います。このクラスのコンストラクタは次のように定義されています。 Map(mapDiv:Element, opts?:MapOptions) Creates a new map inside of the given HTML container, which is typically a DIV element. 1番目の引数には地図を表示するdiv要素を指定します。2番目の引数には地図の座標やズームレベ
googlemapをブラウザの横幅一杯に表示するとカッコイイかも ｜ スターフィールド株式会社
googleMapのapiを利用して、地図を表示することは多いと思います。 弊社でもアクセス情報を載せる時は、かなりの確率で利用させてもらっています。 （最近では、apiではなく、googlemapの埋め込み用コードを使うことも多いですが・・・） ふと、このmapを横幅一杯に表示されたらなんかかっこいいんじゃないかと思って、 試してみました。 DEMO なんかデザイン次第じゃかっこ良くなるんじゃあないでしょうか？？ ただ、横幅一杯にした場合、地図をスクロールやマウスのホイールで動くようにしてしまうと 若干めんどくさいですね。。。 DEMOでは動かないようにしています。 方法は、ただcssでwidthを100%に設定するだけで、 googlemapの設定は通常の設定でOKです。 一応、googlemapのソースを載せておきます。 <script type="text/javascript"
Google Map をレスポンシブ対応に | Web Design Leaves
<div class="map_wrapper"> <div class="googlemap"> <!-- 地図埋め込み用 HTML コードをペースト --> </div><!--end of .googlemap--> </div><!--end of .map_wrapper--> https://maps.google.com で住所を入力して、鎖のようなアイコン（リンク）をクリックし、「ウェブサイトへの地図埋め込み用 HTML コード」を取得する。（カスタマイズしたい場合は、「埋め込み地図のカスタマイズとプレビュー」をクリック） 追加情報 現在は Google Map が変更されてこれを書いたときとは少し違っています。「新しいバージョンの地図の場合」に少し追記しました。 取得したコードを HTML に貼り付ける。 <div class="map_wrapper"> <div cl
Google Maps API | WordPressとプラグインを使ってお店紹介サイトを作る方法
WordPressと便利なプラグイン＆APIを使いお店紹介サイト（東池袋「カレーマップ」のようなサイト）を構築する方法全部教えます！！ Google Maps APIは沢山のサイトでも利用されていて、今更説明の必要もないくらいメジャーなものですが、物凄くシンプルに書くと「Googleマップを活用できるAPI」となります。 詳細をグダグダ書いてもわかりにくくなるし、Google Maps APIの詳細は（これも）色んなところで書かれていますから、参考サイトを最後に紹介するにとどめてここでは実際に運用しているソースコードを中心に紹介していきます。 Google Maps API 目次 準備編 トップページも個別ページも共通になっているのが、ヘッダーへの記述になります。これがないといくら頑張っても表示されませんよ、、 といってもそんなに大変ではなく、次のものをheader.phpのscript
WordPressのカスタムフィールドの値を使用してカスタムフィールドに値を登録する | com4tis
WordPressのカスタムフィールドの値を使用してカスタムフィールドに値を登録する方法です。 今回は、カスタムフィールドに住所の値を登録すると緯度経度の情報をカスタムフィールドに登録するようなものを作成します。 WordPressのカスタムフィールドの住所から緯度経度を登録するためには、 WordPressのカスタムフィールドから住所を取得 取得した値(住所)からカスタムフィールドに登録 WordPressのカスタムフィールドに登録 と、いうような流れになります。 WordPressのカスタムフィールドから住所を取得 WordPressのカスタムフィールドから住所を取得する方法です。 今回は、保存した際に自動的に緯度経度を登録していきたいので、保存のタイミングでカスタムフィールドから値を取得します。 WordPressのタイミングとして、フックというものがあります。このフックに引っ掛けて
WordPressのカスタムフィールドに住所や地名を登録するだけでGoogleマップが表示されるようにカスタマイズする
少し前に小規模のローカル地域での 店舗検索サイトのお手伝いをさせて 頂いたんですが、その時に使った Tipsです。WordPressのカスタム フィールドに住所を入れるだけで、 地図が表示されるようにする。 カスタムフィールドに住所を入力すればGoogleマップが自動で表示されるようにする、っていう方法。 住所入力でGoogleマップを表示する APIを使います。これは少し前にjQueryでやる方法を知人に聞かれたので記事を書きました。 APIと少しのjQueryコードでGoogle Mapの地図の色を変更する なので細かい解説は割愛します。 コードではコードです。 API<script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></sc
Google Maps API V3の使い方とは？ | WordPressにGoogle Maps API V3！
◆Google Maps JavaScript API V3 ブログ目次 Google Maps API v3とは？ 本ブログは判らないところをコツコツ積み重ねました。あくまでご参考にされて下さい。Google Maps APIを扱うことは決して難しいことではないと思います。Google Maps JavaScript API V3のページからスタートするといいと思います。 ※V2は、2013年11月以降は使用できなくなります。 いきなりサンプル集（example）地図を見るならコチラ Google Maps API Google Maps APIサービスがサポートする国・都市の一覧表 初期設定 Google Maps API V3の地図（マップ）をPC、スマートフォンで見れるように表示させるscriptとメタタグの設定 地図に表示する。 ナビゲーションコントロール、マップタイプコントロー
だれでも地図
「だれでも地図」は、2017年11月末をもちましてサービスを終了させていただくことになりました。 これまで「だれでも地図」をご利用いただき誠にありがとうございました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GoogoleMap～マイプレイスの作り方～
逆引きGoogle Maps APIリファレンス ver 3
Engadget | Technology News & Reviews