タグ

google mapsとGoogle Mapsに関するnaohorのブックマーク (19)

  • gmaps-custom01

    地図の貼り付けなど簡単にできるグーグルマップ。パラメータの内容を理解して自由自在に使おう。。。と思ったが条件によってパラメータが言うことをきかなかったりします。 ですので、とりあえず吹き出しの内容の編集を。 記事書きながらいろいろと調査してわかったのですが、記事の内容はあまり実用的ではありません。なんらかの事情で吹き出しの内容を変えたい場合、やってみてください。 地図の場所によって出てくるパラメータが違かったりしますが、うまく応用してみてください。 会社やお店の地図をグーグルマップを使って貼り付ける方も多いとおもいます。 そんな時、 何らかの理由で吹き出しの内容を変えたり、最寄りの駅まで表示させたりするにはURLパラメータの変更がオススメです。(パラメータ全体の話にすると長くなりすぎるので、今回はフキダシの内容の編集について) グーグルマップを普通に貼り付ける方法は、わかりにくいと定評の

  • 記事の投稿作業をしやすくする投稿画面のカスタマイズ方法いろいろ - MdN Design Interactive

    今回は記事の投稿時にHTMLなどを記述する必要がある際でも、だれでも簡単にできるように投稿作業を便利にするカスタマイズ方法をいくつか紹介していきたいと思います。投稿画面内にもスタイルを適用される「editor-style.css」の設定方法や投稿時の自由に入力したい情報をボタンとして投稿できる「AddQuicktag」やビジュアルエディタのボタンを拡張する「TinyMCE Advanced」の使い方を見ていきます。 解説:(有)ムーニーワークス ハヤシユタカ WordPressではスタイルシートは基は「style.css」に記述して作業していきます。記事を投稿する画面上では、何もしないとそのまま原稿や画像がそのまま表示されてしまいます。 Webデザイナーの人達はそれで全く問題ないですが、運用を担当されるWeb系以外の方ですと単純な文章だけの日記的なページ以外に、少し複雑なコードになると投

    記事の投稿作業をしやすくする投稿画面のカスタマイズ方法いろいろ - MdN Design Interactive
  • Google Maps v3 Shortcodeを使ってWordPressに地図を埋め込む

    WordPressの記事にGoogle Mapを埋め込むプラグインはいくつかありますが、その中でも特にお勧めなのがGoogle Maps v3 Shortcodeです。 このプラグインは、「Google Maps v3 API」を利用してマップを表示してくれるプラグインなのですが、様々なパラメータが用意されており、中でもマップに挿入されるアイコンをオリジナルのモノに変更できる機能が便利です。 WordPress Plugin: Google Maps v3 Shortcode 上記は海外のサイト(このプラグインの製作者様のブログ)ですが、詳細に各種パラメータが詳しく解説されています。今回は、上記の解説サイトを元に、各種パラメーターの動きを解説したいと思います。 Google Maps v3 Shortcodeのインストール まずはGoogle Maps v3 Shortcodeをインストー

    Google Maps v3 Shortcodeを使ってWordPressに地図を埋め込む
  • Googleマップのカスタマイズに挑戦してみた!

    今回は初めてGoogleマップのカスタマイズに挑戦したので、備忘録としてやり方をまとめました。 カスタマイズできると知ってはいるけど難しそうで試したことない人も多いはず…そんな方は是非チェックしてみてください! それではどうぞ! Googleマップのカスタマイズをする意味 実店舗があるお店のサイトにとって、そのお店の行き方や場所が分かるマップは重要なコンテンツだと思います。初めてお店に行きたい時に、サイトにマップがあるととても分かりやすいですよね! そんな時よく使われるのがGoogleマップです。ただサイトによってはマップとサイトデザインがあっておらず違和感を感じる場合もあります。 デザインをあわせるためにオリジナルの地図画像を作るという手もありますが、道が変更されたり、目印のお店が無くなったりするたびに変更しないといけないので正直あまり実用的ではありません。そこでオススメしたいのが、Go

    Googleマップのカスタマイズに挑戦してみた!
  • 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

    GoogleMapの簡単な埋め込み方法。アイコンやデザインのカスタマイズも! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 新しいGoogle Mapsで地図の埋め込みが可能に

    新しい、よりソーシャルに洗練されたGoogle Mapsが一般公開されてしばらくたちますが、なかなか使いづらい面があったのは、ウェブサイトなどに埋め込むことができないという制限があったためでした。 埋め込めないということは、地図を「ほら、これです」と紹介できないということなのですね。 しかしようやく、地図の埋め込み機能が追加され、世界中を紹介できるようになりました。また、この埋め込みには Google+ プロフィールも直結していますので、これまで以上の使い方がありそうです。### 新しい埋め込み機能を利用する 地図の埋め込みは、画面右下の歯車アイコンから行います。 あとはサイズを調整し、埋め込みコードを取得すればブログなどにそのまま貼り付けることができます。 注目したい新しいGoogle Mapsのルック&フィール どうせですから、新しい埋め込みコードで、世界主要都市のGoogle Map

    新しいGoogle Mapsで地図の埋め込みが可能に
  • 素早く簡単にGoogleマップを導入できるjQueryプラグイン「initmap.js」:phpspot開発日誌

    jQuery plugin for Google Maps - initmap.js 素早く簡単にGoogleマップを導入できるjQueryプラグイン「initmap.js」 HTML5 Geolocation, Markers API等扱えて、スクリプト自体は1.7KBと超軽量。 Googleマップ使ってみたいけどなんか難しそうという方は参考にしてみるとよさそう。 地図を表示したい場合は以下のように超絶簡単。 関連エントリ WebGLを使った3Dマップ描画エンジン「Cesium」 ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」

  • Google Maps APIのおさらい。

    Webサイトで地図を表示するのに便利なGoogle マップ。Googleが提供しているGoogle Maps APIを使って、地図を設置する方法から、マーカーを置いたり、道のりを表示したり、地図の色を変えたりするためのコードをまとめました。※Google Maps APIの中でも、ここではGoogle Maps JavaScript API v3を使ったサンプルを掲載します。 以下は目次です。クリックするとその項目へ移動します。 Google マップを設置する。 いちばん簡単なGoogle マップ ジオコーディングなGoogle マップ Google マップの読み込み方 場所を示す。 マーカーを置く アイコンを置く 吹き出しを出す 道のりを表示する。 ポリラインで描画する Directions Serviceを利用する 見た目をカスタマイズする。 コントロールのカスタマイズ デザインのカス

    Google Maps APIのおさらい。
  • display:noneの要素にGoogle Mapsを貼り付ける

    display:noneの要素にGoogle Mapsを貼り付ける 「jQuery逆引きマニュアル」の読者の方から、「タブパネルにGoogle Maps APIを掲載すると、ポイントが真ん中に表示されず、左上にずれて表示されます」と質問を受けました。 書籍ではタブパネルの作成方法のみを解説しており、Google Maps部分は読者の方の応用ですが、次のような方法で解決可能です。 基的にGoogle Maps APIをdisplay:noneの要素に貼り付けるそのような状態(ポイントが真ん中に表示されず左上にずれる)になります(1度キャッシュされるとちゃんと表示されると思います)。 サンプル そいうった場合はdisplay:blockにするタイミングで次のような命令を行うとちゃんと表示されるようになります。 google.maps.event.trigger(map, 'resize');

    display:noneの要素にGoogle Mapsを貼り付ける
  • 手軽になった!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)iPhoneAndroidへの対応 iPhoneAndroidで地図を高速に表示できるように

    手軽になった!Google Maps API V3 (1/2)
  • infowindowのサイズ指定 - American Life in the Summertime

    昨日のエントリに久しぶりにGoogle Maps API v3のことを書いたんで、あれこれ見てたんだけど… 英語のリファレンスと日語のリファレンスに差異があるのね。 日語のリファレンスには、infowindowにsizeというプロパティがあるのに、英語版じゃmaxWidthしかない。 …っつーか、そもそもこのサイズ関係のプロパティって、動作が意味不明。 どうやらみんな同じようなことを思ってるようで、Googleグループでも色々と議論されているようです。 it seems no matter what i use for maxWidth for the infowindow it's always at least 200px wide. This is a problem for mobile phone that have small screens. Is there a way

    infowindowのサイズ指定 - American Life in the Summertime
    naohor
    naohor 2012/09/15
    infowindowのサイズ指定
  • 氧气罐能上飞机么-北海市某某新材料培训中心

    地 址:联系地址联系地址联系地址 电 话:020-123456789 网址:tanaka8.com 邮 箱:admin@aa.com 氧气罐能带上飞机吗?求解答_问答库问答氧气罐不能带上飞机的氧气,因为属于易爆物品。但是上飞丽江的超市和小卖铺都有氧气罐卖,玉龙雪山从山下到山上一路都有卖的,所以不需要提前买好。建议在丽江。氧气 氧气罐可否上飞机?飞机上不能携带氧气瓶,也不可以托运氧气瓶。上飞 1、氧气民航有关规定:供医用的上飞小型氧气瓶不允许随身携带上飞机,也不允许作为交运行李托运。(1)旅客如因病在航班上。氧气 准备提前买好氧气罐,上飞能带上飞机吗?不可以。氧气氧气罐属于易爆品。上飞中国民航总局关于不能随身携带和不能托运的氧气物品规定如下: 在中国境内乘坐民航班机禁止随身携带或托运以下物品: 1 、枪支、上飞。氧气 请问飞机上是上飞否可以带便携式氧气罐?1、罐装氧气不能能带上飞机。氧气 2

    氧气罐能上飞机么-北海市某某新材料培训中心
  • Google Maps 入門

    Google マップはグーグルが提供している地図サービスです。この Google マップをカスタマイズして独自のマーカーを表示させたり、指定した区間のルート検索を行ったりすることができるように色々な API が提供されています。ここでは Google マップで提供されている API の中でもウェブサイトで利用者が操作可能な地図をカスタマイズして表示することができる Google Maps JavaScript API の使い方の解説します。 ※ Google マップを利用者として使う場合の使い方については「Googleマップの使い方」を参照されて下さい。 なお JavaScript の基的な使い方については「JavaScript入門」を参照されてください。

    Google Maps 入門
  • Google Maps API V3 InfoWindowにHtml ビジネスマンの徹底パソコン奮闘サイト

    2011-03-16: 目次を作成しました。 2010-09-17: Google Map 2 記事一覧を作成しました。 2010-07-03: Google Map 3 記事一覧を作成しました。 前回、InfoWindowの記事だったので、 ついでなので今回はそのInfoWindowにHtmlを表示してみます。 サンプルコードです。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Google Maps V3</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://maps.googl

  • これは便利!『グーグルマップ』に電車の時刻表&経路検索が追加 | ライフハッカー・ジャパン

    Android版『グーグル マップ』が16日にアップデートされ、時刻表(一部路線のみ)と路線の検索ができるようになりました。 例えばマップ上の東京駅をタップすると、上のキャプチャ画像のように赤色のアイコンと青色のアイコンが表示されます。 Photo by trams aux fils. 左のアイコン(赤)からは、経路の検索が可能。右のアイコン(青)からは、東京駅から乗車できる路線の出発時刻を確認できます。「出発駅」はすでに東京と入力されているので、あとは目的地を入力するだけです。 Googleマップから直接時刻表と経路検索ができるのは便利ですね。ただ、2012年8月18日現在ではAndroidのみの対応です。試しに私のiPhoneをチェックしてみましたが未対応でした。iPhoneユーザーはiOS 6の新マップに期待ですね。 「グーグル マップ」に電車の時刻表&経路検索がアップデート追加 |

    これは便利!『グーグルマップ』に電車の時刻表&経路検索が追加 | ライフハッカー・ジャパン
  • Google Maps のパラメータ

    グーグルマップのパラメータ指定の仕方を説明します。 他にもありますが、分かっている範囲です。 API版ではありません。URL版?です。 PC版URL例) http://maps.google.co.jp/maps?f=q&hl=ja&geocode=&q=%E6%96%B0%E5%AE%BF&ie=UTF8&ll=35.68923,139.693995&spn=0.029488,0.083942&z=14 PC版パラメータ説明

  • スポーツバイクでまったりビワイチ : IS01をオフラインでもGPSナビとして利用すべくRmapsを導入 - livedoor Blog(ブログ)

    自転車での琵琶湖一周を目標に初めてのスポーツバイクとして、プレシジョンスポーツ 2008(サイクルベースあさひオリジナルクロスバイク)を購入。それから、琵琶湖一周の目標を達成するまでと、その後を記録しているブログです。 現在、プレシジョンスポーツ(略称:プレスポ)は普段乗りで活躍し、ビワイチなどのサイクリングはBianchiのロードレーサーSempre pro 2018(SORA→ULTEGEA)とSempre ProについていたSORAを取り付けた中華フレームBXT SL1.0の2台体制でやってます。 (旧ブログ名:プレスポでびわ湖一週 →クロスバイクでビワイチ) ネットを色々調べているとRmapsというソフトを使えばオフラインでもGPSナビとして使えるようなので早速、マーケットからRmapsをダウンロード。 そして、Rmaps用のマップデータを作成するソフトとしてTrekBuddy_A

  • Googleマップの地図表示はオーガニック検索のCTRを60%下げる!?

    キーワードに地域や駅などが含まれるなど場所に関係した検索がなされたとき、GoogleGoogleマップからの結果を検索結果に差し込みます(Googleマップで直接検索したときと同一ではない)。 いわゆるユニバーサル検索(のひとつ)ですね。 Googleマップが検索結果に入り込んでくると、通常のウェブ検索の結果に出てきてたページのクリック率が下がることは容易に想像できます。 いったいどの位CTRが下がるのでしょうか? WebmasterWorldのフォーラム管理者tedsterは、35%~60%を失っているのを実感しているとコメントしています。 そこまで多くなく20%という声も存在します。 検索キーワードや地図が差し込まれる場所にも大きく影響を受けそうです。 最初に見せたスクリーンキャプチャはオーガニック結果1位の上にGoogleマップが表示されています。 しかし、下に貼ったスクリーンキャ

    Googleマップの地図表示はオーガニック検索のCTRを60%下げる!?
  • Uta's Dream -どーらくにっき-: Google MapsがIEで表示できない

    仕事で作っているサイトにGoogle Mapsを使うことにして、MySQLPHPでプログラムを作ったものの、何故かInternet Explorerでは地図が表示されないのです(IE6でもIE7でも同様)。以下のスクリーンショットのように、コントローラーのみが表示される状態になります。Safari、Firefoxでは正常に表示されます。 Googleで調べてみるとGoogle MapsのJavaScriptを全て関数にしてhead内に埋め込めば良いとか、文字コードの問題とか出てくるのですが、ワタクシの作ったものはJavaScriptは全て関数にしてありましたし、文字コードもutfで統一(DBはeucですが、PHPで変換して出力)してありました。検索しても同じようなケースを見つけられず、コードを単純化したり、2日間悩んだあげく、やっと原因を突き止めることができましたのでブログに記載しておき

  • 1