https://qwerty.work/tags/google-maps-javascript-api-v3/ Recent content in Google Maps JavaScript API V3 on qwerty.work Hugo -- gohugo.io ja-JP Mon, 23 Jan 2012 20:32:37 +0900 https://qwerty.work/post/2012/01/google_maps_javascript_api_v3/ Mon, 23 Jan 2012 20:32:37 +0900 https://qwerty.work/post/2012/01/google_maps_javascript_api_v3/ <p>google.load(&lsquo;jquery&rsquo;, &lsquo;1.3.2&rsquo;);</p> <pre><code>$(document).ready(function() { var mapdiv = document.getElementById('map_canvas'); var geocoder = new google.maps.Geocoder(); var point = new google.maps.LatLng(34.057488,131.808716); var myOptions = { zoom: 12, center: point, mapTypeControl: true, navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var map = new google.maps.Map(mapdiv, myOptions); var marker = new google.maps.Marker({ position: point, map: map, draggable: true }); }); </code></pre> <p>グーグルマップのAPIがV3になってから今まで必要だったAPIキーが不要になっているらしい。</p> <p> </p> <p>地図を表示する機会があったので、会社の所在地でマーカー付のサンプルを作ってみた。</p> <p>意外に簡単。</p> <p> </p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;!</span><span style="color:#a6e22e">DOCTYPE</span> <span style="color:#a6e22e">HTML</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">html</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">head</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">meta</span> <span style="color:#a6e22e">http</span><span style="color:#f92672">-</span><span style="color:#a6e22e">equiv</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Content-Type&#34;</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/html; charset=utf-8&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">title</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">GoogleMapsApiV3で地図を表示</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/title&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span><span style="color:#960050;background-color:#1e0010">↓↓</span><span style="color:#a6e22e">GoogleMapApiV3</span><span style="color:#960050;background-color:#1e0010">↓↓</span><span style="color:#f92672">--&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;text/javascript&#39;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;http://www.google.com/jsapi&#39;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;text/javascript&#39;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">load</span>(<span style="color:#e6db74">&#39;jquery&#39;</span>, <span style="color:#e6db74">&#39;1.3.2&#39;</span>);<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;text/javascript&#39;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;http://maps.google.com/maps/api/js?sensor=false&amp;language=ja&#39;</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;UTF-8&#39;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">$</span>(document).<span style="color:#a6e22e">ready</span>(<span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">mapdiv</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#39;map_canvas&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">geocoder</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">maps</span>.<span style="color:#a6e22e">Geocoder</span>(); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">point</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">maps</span>.<span style="color:#a6e22e">LatLng</span>(<span style="color:#ae81ff">34.057488</span>,<span style="color:#ae81ff">131.808716</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">myOptions</span> <span style="color:#f92672">=</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">zoom</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">12</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">center</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">point</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">mapTypeControl</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">navigationControl</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">navigationControlOptions</span><span style="color:#f92672">:</span> { <span style="color:#a6e22e">style</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">maps</span>.<span style="color:#a6e22e">NavigationControlStyle</span>.<span style="color:#a6e22e">SMALL</span>}, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">mapTypeId</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">maps</span>.<span style="color:#a6e22e">MapTypeId</span>.<span style="color:#a6e22e">ROADMAP</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scaleControl</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> </span></span><span style="display:flex;"><span> }; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">map</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">maps</span>.<span style="color:#a6e22e">Map</span>(<span style="color:#a6e22e">mapdiv</span>, <span style="color:#a6e22e">myOptions</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">marker</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">google</span>.<span style="color:#a6e22e">maps</span>.<span style="color:#a6e22e">Marker</span>({ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">position</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">point</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">map</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">map</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">draggable</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span> </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">&lt;!--</span><span style="color:#960050;background-color:#1e0010">↑↑</span><span style="color:#a6e22e">GoogleMapApiV3</span><span style="color:#960050;background-color:#1e0010">↑↑</span><span style="color:#f92672">--&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/head&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">body</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;map_canvas&#34;</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;width: 560px; height: 250px;&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/body&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/html&gt;</span> </span></span></code></pre></div><p> </p> <p>こういうコードを簡単に作ってくれるサイトやフォームがあればいいのにね。</p>