APIを使ってGoogleマップの色を変えてみよう！｜株式会社カポタスト
4月もあっというまに最終日となり、現在ゴールデンウィーク真っ只中です。 色々な行楽地に行かれる方も多いのではないでしょうか？ そんな時に活用するのがGoogleマップ。WEBサイトにもGoogleマップが埋め込まれてるのが当たり前になってきました。 この時、通常のマップではなく少しカスタマイズされたGoogleマップであると、ユーザーにより興味を持たせることが出来ると思います。 ということで、今回はGoogleマップの簡単なカスタマイズについてご紹介いたします！ カスタマイズの前に GoogleマップのAPIには多くの種類が存在しますが、マップの表示のカスタマイズには「Google Maps JavaScript API」を使用します。 まずはじめにこのAPIを有効にしたAPIキーの取得が必要となるのですが、今回はこの説明は省略させていただきます。 （APIの取得の方法は近日公開予定） マ
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の地図に目的地までのルートをJavaScriptで描画する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンジニアのおじいちゃんです。 今回は、任意で入力した場所から指定された場所までのルートをGoogleマップに描画する方法を紹介したいと思います。 Googleマップ描画 サンプルとして、任意に入力した場所からLIGまでの、徒歩でのルートを描画することにしたいと思います。 まずは通常のGoogleマップを設置します。 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js/sensor=TRUE"></script> <div id="map_canvas" style="width: 800px; height: 600px;"></div> <div class="searchBox"> <form> <input id="mapSearch" type="text"> <
jCorner – フラットUIで使える角折りデザイン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました フラットなデザインが流行ですが、単純に単色でシンプルに表現する段階は過ぎています。Googleの言うマテリアルデザインのように動きのある表現を通じてUXを高める動きもあります。 そこで今回はjCornerを紹介します。フラットUIの中でも映える、効果的な表現です。 jCornerの使い方 単純に角を折るだけでなく、色が自動的に濃くなっていたりするのがいい感じです。 <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="jCorner.js" type="text/javascript"></script> <div id="pap
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
