このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
javascript:google-mapper-v3 [2011/03/03 23:07] dgbadmin [Google Mapを表示する] |
javascript:google-mapper-v3 [2015/09/22 14:38] (現在) dgbadmin [ソースコード] 0.7.1 |
||
---|---|---|---|
行 3: | 行 3: | ||
(更新履歴とコメントは[[http:// | (更新履歴とコメントは[[http:// | ||
- | {{:php-tool-box: | + | {{http:// |
- | [[http://code.google.com/ | + | [[https://developers.google.com/ |
+ | これを使えば、普通に地図を表示する他にも、ストリートビューの表示、Google AdSenseの表示、httpsでのアクセス(SSLで暗号化されたセキュアなページの表示)など、いろいろなことを手軽に実現できる。 | ||
- | Google Maps API V3は< | + | (上記の画像はGoogle Maps API V3ではなく[[php-tool-box/google-maps-static-api|Google Static Maps API]]で表示している。) |
行 13: | 行 14: | ||
[[http:// | [[http:// | ||
- | [[http:// | + | [[http:// |
+ | |||
+ | [[http:// | ||
+ | |||
+ | [[https:// | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | [[http:// | ||
行 21: | 行 34: | ||
===== ダウンロード ===== | ===== ダウンロード ===== | ||
- | [[http:// | + | [[http://g.0-oo.net/ |
※ダウンロードできるのは最新のBeta版の場合もあります | ※ダウンロードできるのは最新のBeta版の場合もあります | ||
行 28: | 行 41: | ||
===== 使い方の例 ===== | ===== 使い方の例 ===== | ||
- | ==== 準備 ==== | + | Google Mapper V3のソースコードの中に書いてあるGoogleMapper.demo()も参考に。 ;-) |
- | < | + | ==== Google Maps APIのJavaScriptを読み込む ==== |
- | <script type=" | + | < |
- | <script type=" | + | GoogleMapper.load(function() { |
+ | | ||
+ | }); | ||
</ | </ | ||
- | |||
- | |||
- | あとは、ソースコードの中のGoogleMapper.demo()を参考に。 ;-) | ||
- | |||
- | 例えばこんなことができる。 | ||
==== Googleマップを表示する ==== | ==== Googleマップを表示する ==== | ||
行 51: | 行 61: | ||
</ | </ | ||
- | ==== アイコン画像を指定してマーカーを表示する | + | === アイコン画像を指定してマーカーを表示する === |
<code javascript> | <code javascript> | ||
GoogleMapper.addMarker(35.7, | GoogleMapper.addMarker(35.7, | ||
</ | </ | ||
- | ==== 色を指定してマーカーを表示する | + | === 色を指定してマーカーを表示する === |
<code javascript> | <code javascript> | ||
GoogleMapper.addColorMarker(34.7, | GoogleMapper.addColorMarker(34.7, | ||
</ | </ | ||
- | ==== 色を指定してマーカーを表示して、その中に文字を表示する | + | === 色を指定してマーカーを表示して、その中に文字を表示する === |
<code javascript> | <code javascript> | ||
GoogleMapper.addColorMarker(34.7, | GoogleMapper.addColorMarker(34.7, | ||
</ | </ | ||
- | ==== 吹出し型のマーカーを表示する | + | === 吹出し型のマーカーを表示する === |
<code javascript> | <code javascript> | ||
- | var naha = GoogleMapper.addBubbleMarker(26.2, | + | GoogleMapper.addBubbleMarker(26.2, |
</ | </ | ||
- | ==== 日本列島表示時にちょうどよい沖縄のミニ地図を表示する ==== | + | ==== 地図とストリートビューを並べて表示する ==== |
+ | デフォルトではストリートビューは地図の領域に表示されるので、地図とストリートビューを並べてみることができない。\\ | ||
+ | それでは惜しいので、地図の横にdiv要素を用意して下記のようにすれば、地図とストリートビューを並べて表示できる。 | ||
<code javascript> | <code javascript> | ||
- | GoogleMapper.showOkinawa(); | + | GoogleMapper.setStreetView(streetViewId); |
</ | </ | ||
- | ==== 逆ジオコーディングして地名をタイトルバーに表示する ==== | + | ==== 広告(Google AdSense)を表示する ==== |
+ | AdSenseを表示するには、あらかじめGoogle MapsのJavaScriptの読み込みでライブラリとしてAdSenseを指定しておく必要がある。 | ||
+ | <code javascript> | ||
+ | GoogleMapper.load(function() { | ||
+ | GoogleMapper.show(mapDivID); | ||
+ | GoogleMapper.showAds(" | ||
+ | }, " | ||
+ | </ | ||
+ | |||
+ | ==== 現在位置を取得する ==== | ||
+ | iPhoneやAndroidの他、ノートPCでもWi-Fiから現在位置を取得できる。iPhoneだとタイムアウトする? | ||
+ | <code javascript> | ||
+ | GoogleMapper.getCurrentPosition(function(latLng) { | ||
+ | // (略) | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | ==== 地名、駅名、施設名等から緯度経度を取得する(ジオコーディング) ==== | ||
+ | <code javascript> | ||
+ | GoogleMapper.search(" | ||
+ | if (GoogleMapper.checkResponseStatus(status)) { | ||
+ | var latLng = GoogleMapper.getGeocodeLatLng(response[0]); | ||
+ | // | ||
+ | } | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | ==== 緯度経度から住所を取得する(逆ジオコーディング) | ||
<code javascript> | <code javascript> | ||
GoogleMapper.searchByLatLng(latLng, | GoogleMapper.searchByLatLng(latLng, | ||
if (GoogleMapper.checkResponseStatus(status)) { | if (GoogleMapper.checkResponseStatus(status)) { | ||
- | | + | |
+ | // | ||
} | } | ||
}); | }); | ||
</ | </ | ||
- | ==== 二つの地点間の車または徒歩の道順を表示する ==== | + | ==== 車または徒歩での道順案内を表示する ==== |
+ | さらにストリートビューと合わせて見ると面白い。 | ||
<code javascript> | <code javascript> | ||
- | if (GoogleMapper.demo.startFlg) { // | + | var startFlg = false; |
- | | + | |
+ | if (startFlg) { // | ||
+ | startFlg = false; | ||
GoogleMapper.direct(latLng); | GoogleMapper.direct(latLng); | ||
return ""; | return ""; | ||
} | } | ||
- | GoogleMapper.demo.startFlg = false; | + | startFlg = false; |
- | GoogleMapper.demo.startRouting = function(mode) { | + | var startRouting = function(mode) { |
GoogleMapper.mapClickable = false; | GoogleMapper.mapClickable = false; | ||
- | | + | startFlg = true; |
GoogleMapper.direct(latLng, | GoogleMapper.direct(latLng, | ||
GoogleMapper.closeInfoWindow(); | GoogleMapper.closeInfoWindow(); | ||
行 112: | 行 155: | ||
for (var mode in modes) { | for (var mode in modes) { | ||
h += '< | h += '< | ||
- | h += ' onclick=" | + | h += ' onclick=" |
- | h += ' | + | h += ' |
} | } | ||
</ | </ | ||
- | ==== 地名や施設名等で検索する(ジオコーディング) | + | ==== 日本列島の地図を表示した時にちょうどよいサイズの沖縄のミニ地図を画面右下よりに表示する ==== |
+ | 日本列島と一緒に沖縄も表示させたい。 | ||
<code javascript> | <code javascript> | ||
- | function search(keywordInputId) { | + | GoogleMapper.showOkinawa([markers]); //あれば沖縄に表示するMarkerの配列を渡す |
- | var searchBox = document.getElementById(keywordInputId); | + | |
- | | + | |
- | searchBox.focus(); | + | |
- | }; | + | |
- | </code> | + | |
- | + | ||
- | ==== 広告(Google AdSense)を表示する ==== | + | |
- | <code javascript> | + | |
- | GoogleMapper.showAds(" | + | |
- | </code> | + | |
- | + | ||
- | なお、AdSenseを表示するには、Google MapsのJavaScriptの読み込みでライブラリとしてAdSenseを指定する必要がある。 | + | |
- | <code html> | + | |
- | <script type=" | + | |
- | <script type=" | + | |
</ | </ | ||
行 143: | 行 172: | ||
| | ||
| | ||
- | | + | |
- | | + | |
| | ||
* | * | ||
| | ||
- | | + | |
- | | + | |
*/ | */ | ||
var GoogleMapper = { | var GoogleMapper = { | ||
/** Mapオブジェクト */ | /** Mapオブジェクト */ | ||
map: null, | map: null, | ||
- | | + | |
+ | markers: [], | ||
+ | /** 吹き出し */ | ||
+ | infoWindow: null, | ||
/** Mapをクリック可能か(beClickable()内でのmapのclickイベントの制御用) */ | /** Mapをクリック可能か(beClickable()内でのmapのclickイベントの制御用) */ | ||
- | mapClickable: | + | mapClickable: |
- | + | }; | |
- | /** 最後に開いた吹き出しオブジェクト | + | /** |
- | | + | |
- | + | | |
- | /** 地名による検索時にリスト表示する最大件数 */ | + | |
- | | + | |
+ | */ | ||
+ | GoogleMapper.load = function(callback, | ||
+ | | ||
+ | |||
+ | var params = [ | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ]; | ||
+ | |||
+ | | ||
+ | | ||
+ | script.src = "// | ||
+ | | ||
}; | }; | ||
/** | /** | ||
行 170: | 行 215: | ||
| | ||
| | ||
+ | | ||
+ | | ||
+ | | ||
*/ | */ | ||
- | GoogleMapper.show = function(mapId, | + | GoogleMapper.show = function(mapId, |
- | | + | |
center: new google.maps.LatLng((lat || 38), (lng || 137.5)), | center: new google.maps.LatLng((lat || 38), (lng || 137.5)), | ||
zoom: (zoom || 5), | zoom: (zoom || 5), | ||
mapTypeId: google.maps.MapTypeId.ROADMAP, | mapTypeId: google.maps.MapTypeId.ROADMAP, | ||
- | scaleControl: | + | |
- | }); | + | { featureType: |
+ | ], | ||
+ | | ||
+ | overviewMapControl: | ||
+ | overviewMapControlOptions: | ||
+ | | ||
+ | |||
+ | for (var i in (options || {})) { | ||
+ | params[i] = options[i]; | ||
+ | } | ||
+ | |||
+ | GoogleMapper.map = new google.maps.Map(document.getElementById(mapId), | ||
+ | GoogleMapper.infoWindow = new google.maps.InfoWindow(); | ||
+ | |||
+ | return GoogleMapper.map; | ||
}; | }; | ||
/** | /** | ||
| | ||
- | | + | |
- | | + | |
- | | + | |
- | | + | |
| | ||
- | | + | |
* | * | ||
| | ||
- | | + | |
*/ | */ | ||
GoogleMapper.addMarker = function(lat, | GoogleMapper.addMarker = function(lat, | ||
+ | var position = lat; | ||
+ | |||
+ | if (lng) { | ||
+ | position = new google.maps.LatLng(lat, | ||
+ | } | ||
+ | |||
var marker = new google.maps.Marker({ | var marker = new google.maps.Marker({ | ||
map: GoogleMapper.map, | map: GoogleMapper.map, | ||
- | position: | + | position: |
title: (title || "" | title: (title || "" | ||
icon: image | icon: image | ||
}); | }); | ||
- | marker.openInfoWindow = function() { | + | |
- | GoogleMapper.openInfoWindow(GoogleMapper.getInfo(marker), null, marker); | + | GoogleMapper.openMarkerWindow(marker); |
- | }; | + | }); |
- | | + | |
return marker; | return marker; | ||
行 209: | 行 277: | ||
/** | /** | ||
| | ||
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
*/ | */ | ||
GoogleMapper.addColorMarker = function(lat, | GoogleMapper.addColorMarker = function(lat, | ||
var type = " | var type = " | ||
var url = GoogleMapper._getIconURL(type, | var url = GoogleMapper._getIconURL(type, | ||
+ | |||
var image = new google.maps.MarkerImage( | var image = new google.maps.MarkerImage( | ||
url, | url, | ||
行 235: | 行 304: | ||
/** | /** | ||
| | ||
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
*/ | */ | ||
GoogleMapper.addBubbleMarker = function(lat, | GoogleMapper.addBubbleMarker = function(lat, | ||
var type = " | var type = " | ||
- | | + | style = style || " |
var icon = GoogleMapper._getIconURL(type, | var icon = GoogleMapper._getIconURL(type, | ||
var iconY = -1, shadowY = -1; | var iconY = -1, shadowY = -1; | ||
+ | |||
switch (style) { | switch (style) { | ||
case " | case " | ||
- | iconY = 42; | + | iconY = 35; |
- | shadowY = 45; | + | shadowY = 37; |
break; | break; | ||
case " | case " | ||
行 282: | 行 352: | ||
*/ | */ | ||
GoogleMapper._getIconURL = function(iconType, | GoogleMapper._getIconURL = function(iconType, | ||
- | var url = ""; | ||
- | |||
- | if (location.protocol == " | ||
- | url = " | ||
- | } else { | ||
- | url = " | ||
- | } | ||
- | |||
- | url += " | ||
- | |||
var params = [style, encodeURIComponent(str || "" | var params = [style, encodeURIComponent(str || "" | ||
行 298: | 行 358: | ||
} | } | ||
- | return | + | return |
}; | }; | ||
/** | /** | ||
- | | + | |
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.getMarkerIndex = function(marker) { | ||
+ | var markers = GoogleMapper.markers; | ||
+ | |||
+ | for (var i = 0, len = markers.length; | ||
+ | if (markers[i] == marker) { | ||
+ | return i; | ||
+ | } | ||
+ | } | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.removeMarker = function(index) { | ||
+ | GoogleMapper.markers[index].setMap(null); | ||
+ | GoogleMapper.markers.splice(index, | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.removeAllMarkers = function() { | ||
+ | for (var i = 0, len = GoogleMapper.markers.length; | ||
+ | GoogleMapper.markers[i].setMap(null); | ||
+ | } | ||
+ | |||
+ | GoogleMapper.markers = []; | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
| | ||
*/ | */ | ||
- | GoogleMapper.getInfo | + | GoogleMapper.openMarkerWindow = function(marker) { |
- | return marker.title; | + | GoogleMapper.openInfoWindow(GoogleMapper.getMarkerInfo(marker), |
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.getMarkerInfo | ||
+ | return | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.escape = function(str) { | ||
+ | var rep = { "&": | ||
+ | |||
+ | return str.replace(/ | ||
}; | }; | ||
/** | /** | ||
行 318: | 行 429: | ||
} | } | ||
- | GoogleMapper.closeInfoWindow(); | + | |
- | | + | |
- | + | infoWindow.setOptions({ content: content, position: latLng }); | |
- | | + | |
infoWindow.open(GoogleMapper.map, | infoWindow.open(GoogleMapper.map, | ||
- | GoogleMapper.lastInfoWindow = infoWindow; | ||
}; | }; | ||
/** | /** | ||
行 329: | 行 438: | ||
*/ | */ | ||
GoogleMapper.closeInfoWindow = function() { | GoogleMapper.closeInfoWindow = function() { | ||
- | | + | GoogleMapper.infoWindow.close(); |
- | | + | |
- | } | + | |
}; | }; | ||
/** | /** | ||
行 353: | 行 460: | ||
}; | }; | ||
/** | /** | ||
- | | + | |
- | | + | |
- | | + | |
+ | | ||
+ | | ||
*/ | */ | ||
- | GoogleMapper.search | + | GoogleMapper.getCurrentPosition |
- | if (keywords) { | + | if (!navigator.geolocation) { |
- | (new google.maps.Geocoder()).geocode( | + | |
- | | + | |
- | GoogleMapper.searchCallback | + | |
- | | + | |
} | } | ||
+ | |||
+ | navigator.geolocation.getCurrentPosition( | ||
+ | function(position) { | ||
+ | var coords = position.coords; | ||
+ | onSuccess(new google.maps.LatLng(coords.latitude, | ||
+ | }, | ||
+ | onError || function(e) { alert(e.message); | ||
+ | { enableHighAccuracy: | ||
+ | ); | ||
+ | |||
+ | return true; | ||
}; | }; | ||
/** | /** | ||
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
*/ | */ | ||
- | GoogleMapper.searchCallback | + | GoogleMapper.setAutocomplete |
- | | + | |
+ | ac.bindTo(" | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.search = function(keywords, | ||
+ | if (!keywords) { | ||
return; | return; | ||
} | } | ||
- | var len = response.length; | + | |
- | | + | |
- | GoogleMapper.map.panTo(GoogleMapper.getGeocodeLatLng(response[0])); | + | if (!GoogleMapper.checkResponseStatus(status)) { |
- | | + | |
- | } | + | |
- | var msg = len + " | + | |
- | | + | |
- | for (var i = 0; i < len; i++) { | + | |
- | | + | |
} | } | ||
- | | + | |
- | alert(msg + " | + | var len = response.length; |
+ | var msg = len + " | ||
+ | |||
+ | if (len == 1) { | ||
+ | var map = GoogleMapper.map; | ||
+ | var result = response[0]; | ||
+ | var latLng = GoogleMapper.getGeocodeLatLng(result); | ||
+ | map.panTo(latLng); | ||
+ | |||
+ | if (map.getZoom() < 14) { | ||
+ | map.setZoom(14); | ||
+ | | ||
+ | |||
+ | GoogleMapper.openInfoWindow(GoogleMapper.getGeocodeAddress(result), | ||
+ | return; | ||
+ | } else if (len < 20) { | ||
+ | for (var i = 0; i < len; i++) { | ||
+ | msg += " | ||
+ | } | ||
+ | } | ||
+ | |||
+ | | ||
+ | }; | ||
+ | |||
+ | (new google.maps.Geocoder()).geocode({ address: keywords }, callback); | ||
}; | }; | ||
/** | /** | ||
行 393: | 行 537: | ||
| | ||
| | ||
+ | | ||
+ | | ||
*/ | */ | ||
GoogleMapper.searchByLatLng = function(latLng, | GoogleMapper.searchByLatLng = function(latLng, | ||
(new google.maps.Geocoder()).geocode({ latLng: latLng }, callback); | (new google.maps.Geocoder()).geocode({ latLng: latLng }, callback); | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.checkResponseStatus = function(status) { | ||
+ | switch (status) { | ||
+ | case " | ||
+ | return true; | ||
+ | case " | ||
+ | alert(" | ||
+ | break; | ||
+ | default: | ||
+ | alert(" | ||
+ | } | ||
+ | |||
+ | return false; | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.getGeocodeAddress = function(geocodeResult) { | ||
+ | var address = ""; | ||
+ | var components = geocodeResult.address_components; | ||
+ | |||
+ | for (var i = components.length - 2; i >= 0; i--) { // | ||
+ | var name = components[i].long_name; | ||
+ | |||
+ | if (!name.match(/ | ||
+ | address += " " + name; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | return address.substring(1); | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.getGeocodeLatLng = function(geocodeResult) { | ||
+ | return geocodeResult.geometry.location; | ||
}; | }; | ||
/** | /** | ||
| | ||
| | ||
- | | + | |
| | ||
- | | + | |
| | ||
*/ | */ | ||
行 431: | 行 623: | ||
origin: router.from, | origin: router.from, | ||
destination: | destination: | ||
- | travelMode: (mode || router.mode || google.maps.DirectionsTravelMode.DRIVING), | + | travelMode: (mode || router.mode || google.maps.TravelMode.DRIVING), |
provideRouteAlternatives: | provideRouteAlternatives: | ||
- | unitSystem: google.maps.DirectionsUnitSystem.METRIC | + | unitSystem: google.maps.UnitSystem.METRIC |
}; | }; | ||
- | | + | |
if (panel) { | if (panel) { | ||
panel.innerHTML = ""; | panel.innerHTML = ""; | ||
行 444: | 行 636: | ||
renderer.setDirections(response); | renderer.setDirections(response); | ||
} | } | ||
- | }; | + | }); |
- | + | ||
- | (new google.maps.DirectionsService()).route(request, | + | |
}; | }; | ||
/** | /** | ||
- | | + | |
- | | + | |
- | | + | |
- | | + | |
*/ | */ | ||
- | GoogleMapper.checkResponseStatus | + | GoogleMapper.setStreetView |
- | | + | |
- | | + | |
- | return true; | + | |
- | case " | + | )); |
- | alert(" | + | |
- | break; | + | |
- | | + | |
- | | + | |
- | } | + | |
- | return false; | + | |
}; | }; | ||
/** | /** | ||
- | | + | |
- | | + | |
- | | + | |
*/ | */ | ||
- | GoogleMapper.getGeocodeAddress | + | GoogleMapper.showPlaces |
- | | + | |
- | var components | + | { bounds: GoogleMapper.map.getBounds() }, // |
- | for (var i = components.length | + | function(results, |
- | var name = components[i].long_name; | + | if (!GoogleMapper.checkResponseStatus(status)) { |
- | if (!name.match(/ | + | return; |
- | | + | } |
+ | |||
+ | GoogleMapper._places | ||
+ | | ||
+ | | ||
+ | |||
+ | | ||
+ | var place = results[i]; | ||
+ | |||
+ | | ||
+ | GoogleMapper.addPlace(place, | ||
+ | GoogleMapper._places[place.id] = true; | ||
+ | | ||
+ | | ||
} | } | ||
- | | + | ); |
- | return address.substring(1); | + | |
}; | }; | ||
/** | /** | ||
- | | + | |
- | | + | |
- | | + | |
*/ | */ | ||
- | GoogleMapper.getGeocodeLatLng | + | GoogleMapper.addPlace |
- | var location | + | var marker |
- | | + | map: GoogleMapper.map, |
+ | position: place.geometry.location, | ||
+ | title: place.name, | ||
+ | icon: new google.maps.MarkerImage(place.icon, | ||
+ | }); | ||
+ | |||
+ | | ||
+ | google.maps.event.addListener(marker, | ||
+ | GoogleMapper.log(place.types.join()); | ||
+ | |||
+ | (new google.maps.places.PlacesService(GoogleMapper.map)).getDetails( | ||
+ | { reference: place.reference }, | ||
+ | function(detail, | ||
+ | if (!GoogleMapper.checkResponseStatus(status)) { | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | var h = GoogleMapper.escape; | ||
+ | var url = h(detail.url.replace(' | ||
+ | GoogleMapper.openInfoWindow( | ||
+ | '<a href="' | ||
+ | null, | ||
+ | marker | ||
+ | ); | ||
+ | } | ||
+ | ); | ||
+ | }); | ||
}; | }; | ||
/** | /** | ||
- | | + | |
- | | + | |
| | ||
| | ||
| | ||
- | | + | |
*/ | */ | ||
GoogleMapper.showAds = function(pubId, | GoogleMapper.showAds = function(pubId, | ||
行 510: | 行 730: | ||
/** | /** | ||
| | ||
- | | + | |
*/ | */ | ||
GoogleMapper.showOkinawa = function(markers) { | GoogleMapper.showOkinawa = function(markers) { | ||
var map = GoogleMapper.map; | var map = GoogleMapper.map; | ||
+ | |||
google.maps.event.addListener(map, | google.maps.event.addListener(map, | ||
google.maps.event.clearListeners(map, | google.maps.event.clearListeners(map, | ||
行 521: | 行 742: | ||
outer.style.position = " | outer.style.position = " | ||
outer.style.right = 0; | outer.style.right = 0; | ||
- | outer.style.bottom = "1.2em"; | + | outer.style.bottom = "120px"; |
outer.style.overflow = " | outer.style.overflow = " | ||
- | outer.style.width = "150px"; | + | outer.style.width = "113px"; |
outer.style.height = outer.style.width; | outer.style.height = outer.style.width; | ||
- | outer.style.border = "solid 0 #ccc"; | + | outer.style.border = "solid 0 #eee"; |
- | outer.style.borderWidth = "3px 0 3px 3px"; | + | outer.style.borderWidth = "6px 0 6px 6px"; |
// | // | ||
var inner = outer.appendChild(document.createElement(" | var inner = outer.appendChild(document.createElement(" | ||
- | inner.style.height = "250px"; | + | inner.style.height = "160px"; |
- | inner.style.top = "-50px"; | + | inner.style.top = "-23px"; |
var okinawa = new google.maps.Map(inner, | var okinawa = new google.maps.Map(inner, | ||
center: new google.maps.LatLng(26.5, | center: new google.maps.LatLng(26.5, | ||
行 548: | 行 768: | ||
closeBtn.innerHTML = " | closeBtn.innerHTML = " | ||
closeBtn.style.position = " | closeBtn.style.position = " | ||
- | closeBtn.style.top = 0; | + | closeBtn.style.top = " |
closeBtn.style.right = 0; | closeBtn.style.right = 0; | ||
closeBtn.style.padding = "0 3px"; | closeBtn.style.padding = "0 3px"; | ||
- | closeBtn.style.backgroundColor = "#ddd"; | + | closeBtn.style.backgroundColor = "#eee"; |
closeBtn.style.cursor = " | closeBtn.style.cursor = " | ||
closeBtn.onclick = function() { outer.style.display = " | closeBtn.onclick = function() { outer.style.display = " | ||
行 565: | 行 785: | ||
return; | return; | ||
} | } | ||
- | var addMarker | + | var duplicateMarker |
var marker = new google.maps.Marker({ | var marker = new google.maps.Marker({ | ||
position: origin.position, | position: origin.position, | ||
行 573: | 行 793: | ||
}); | }); | ||
marker.setMap(okinawa); | marker.setMap(okinawa); | ||
- | google.maps.event.addListener(marker, | + | google.maps.event.addListener(marker, |
+ | GoogleMapper.openMarkerWindow(origin); | ||
+ | }); | ||
}; | }; | ||
for (var i = 0, len = markers.length; | for (var i = 0, len = markers.length; | ||
- | | + | |
} | } | ||
}); | }); | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.log = function(value) { | ||
+ | if (window.console && console.log) { | ||
+ | console.log(value); | ||
+ | } | ||
}; | }; | ||
/ | / | ||
行 584: | 行 815: | ||
| | ||
| | ||
- | | + | |
- | | + | |
+ | | ||
| | ||
- | GoogleMapper.demo = function(mapId, | + | GoogleMapper.demo = function(mapId, streetViewId, routerPanelId, |
+ | var demo = GoogleMapper.demo; | ||
// | // | ||
- | GoogleMapper.show(mapId); | + | |
// | // | ||
- | var iconUrl | + | var tokyo = GoogleMapper.addMarker(35.7, |
- | | + | // |
- | // | + | GoogleMapper.openMarkerWindow(tokyo); |
+ | //色の違うマーカーを表示 | ||
GoogleMapper.addColorMarker(34.7, | GoogleMapper.addColorMarker(34.7, | ||
- | //マーカーを吹き出し型にする | + | // |
- | var naha = GoogleMapper.addBubbleMarker(26.2, | + | var naha = GoogleMapper.addBubbleMarker(26.2, |
// | // | ||
GoogleMapper.showOkinawa([naha]); | GoogleMapper.showOkinawa([naha]); | ||
+ | |||
+ | // | ||
+ | GoogleMapper.setStreetView(streetViewId); | ||
// | // | ||
行 615: | 行 853: | ||
// | // | ||
- | if (GoogleMapper.demo.startFlg) { // | + | if (demo.startFlg) { // |
- | | + | demo.startFlg = false; |
GoogleMapper.direct(latLng); | GoogleMapper.direct(latLng); | ||
return ""; | return ""; | ||
} | } | ||
- | | + | demo.startFlg = false; |
- | | + | demo.startRouting = function(mode) { |
GoogleMapper.mapClickable = false; | GoogleMapper.mapClickable = false; | ||
- | | + | demo.startFlg = true; |
GoogleMapper.direct(latLng, | GoogleMapper.direct(latLng, | ||
GoogleMapper.closeInfoWindow(); | GoogleMapper.closeInfoWindow(); | ||
}; | }; | ||
- | |||
h += "< | h += "< | ||
- | |||
var modes = { | var modes = { | ||
DRIVING: " | DRIVING: " | ||
行 638: | 行 874: | ||
h += '< | h += '< | ||
h += ' onclick=" | h += ' onclick=" | ||
- | h += ' | + | h += ' |
} | } | ||
行 645: | 行 881: | ||
// | // | ||
- | GoogleMapper.getInfo | + | |
- | if (GoogleMapper.demo.startFlg) { | + | |
- | | + | if (demo.startFlg) { // |
+ | demo.startFlg = false; | ||
GoogleMapper.direct(marker.position); | GoogleMapper.direct(marker.position); | ||
return ""; | return ""; | ||
} | } | ||
- | return marker.title; | + | return |
}; | }; | ||
+ | |||
+ | // | ||
+ | if (google.maps.places) { | ||
+ | GoogleMapper.setAutocomplete(keywordInputId); | ||
+ | } | ||
// | // | ||
- | | + | var searchBox = document.getElementById(keywordInputId); |
- | | + | demo.search = function() { |
GoogleMapper.search(searchBox.value); | GoogleMapper.search(searchBox.value); | ||
searchBox.focus(); | searchBox.focus(); | ||
}; | }; | ||
- | //Firebugがあれば、中心点とズーム値をコンソールに表示 | + | //consoleがあれば、中心点とズーム値をコンソールに表示 |
- | | + | |
- | return; | + | |
- | } | + | |
- | var map = GoogleMapper.map; | + | |
- | var log = function() { | + | |
var center = map.getCenter(); | var center = map.getCenter(); | ||
var latlng = " | var latlng = " | ||
- | | + | |
- | }; | + | }); |
- | google.maps.event.addListener(map, | + | |
}; | }; | ||
</ | </ | ||