javascript:google-mapper-v3
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
javascript:google-mapper-v3 [2010/05/17 22:34] – ダウンロード元変更 dgbadmin | javascript:google-mapper-v3 [2015/09/22 14:38] (現在) – [ソースコード] 0.7.1 dgbadmin | ||
---|---|---|---|
行 3: | 行 3: | ||
(更新履歴とコメントは[[http:// | (更新履歴とコメントは[[http:// | ||
- | {{:php-tool-box: | + | {{http:// |
- | [[http://code.google.com/ | + | [[https://developers.google.com/ |
+ | これを使えば、普通に地図を表示する他にも、ストリートビューの表示、Google AdSenseの表示、httpsでのアクセス(SSLで暗号化されたセキュアなページの表示)など、いろいろなことを手軽に実現できる。 | ||
- | Google Maps API V3はまだLabs版でV2に比べて実装されている機能が少ないので、元のGoogle Mapperは残しておいて、それとは別に新しくGoogle Mapper V3を書き直した。 | + | (上記の画像はGoogle Maps API V3ではなく[[php-tool-box/ |
行 13: | 行 14: | ||
[[http:// | [[http:// | ||
- | [[http:// | + | [[http:// |
+ | [[http:// | ||
- | ===== 使い方の例 ===== | + | [[https:// |
- | ソースコードの中の、GoogleMapper.demoを参照。 | + | |
+ | [[http:// | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | [[http:// | ||
行 25: | 行 34: | ||
===== ダウンロード ===== | ===== ダウンロード ===== | ||
- | [[http:// | + | [[http://g.0-oo.net/ |
※ダウンロードできるのは最新のBeta版の場合もあります | ※ダウンロードできるのは最新のBeta版の場合もあります | ||
+ | |||
+ | |||
+ | ===== 使い方の例 ===== | ||
+ | |||
+ | Google Mapper V3のソースコードの中に書いてあるGoogleMapper.demo()も参考に。 ;-) | ||
+ | |||
+ | ==== Google Maps APIのJavaScriptを読み込む ==== | ||
+ | <code javascript> | ||
+ | GoogleMapper.load(function() { | ||
+ | // | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | ==== Googleマップを表示する ==== | ||
+ | <code javascript> | ||
+ | // | ||
+ | GoogleMapper.show(mapId, | ||
+ | </ | ||
+ | |||
+ | ==== マーカーを表示する ==== | ||
+ | <code javascript> | ||
+ | GoogleMapper.addMarker(35.7, | ||
+ | </ | ||
+ | |||
+ | === アイコン画像を指定してマーカーを表示する === | ||
+ | <code javascript> | ||
+ | GoogleMapper.addMarker(35.7, | ||
+ | </ | ||
+ | |||
+ | === 色を指定してマーカーを表示する === | ||
+ | <code javascript> | ||
+ | GoogleMapper.addColorMarker(34.7, | ||
+ | </ | ||
+ | |||
+ | === 色を指定してマーカーを表示して、その中に文字を表示する === | ||
+ | <code javascript> | ||
+ | GoogleMapper.addColorMarker(34.7, | ||
+ | </ | ||
+ | |||
+ | === 吹出し型のマーカーを表示する === | ||
+ | <code javascript> | ||
+ | GoogleMapper.addBubbleMarker(26.2, | ||
+ | </ | ||
+ | |||
+ | ==== 地図とストリートビューを並べて表示する ==== | ||
+ | デフォルトではストリートビューは地図の領域に表示されるので、地図とストリートビューを並べてみることができない。\\ | ||
+ | それでは惜しいので、地図の横にdiv要素を用意して下記のようにすれば、地図とストリートビューを並べて表示できる。 | ||
+ | <code javascript> | ||
+ | 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> | ||
+ | GoogleMapper.searchByLatLng(latLng, | ||
+ | if (GoogleMapper.checkResponseStatus(status)) { | ||
+ | var address = GoogleMapper.getGeocodeAddress(response[0]); | ||
+ | // | ||
+ | } | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | ==== 車または徒歩での道順案内を表示する ==== | ||
+ | さらにストリートビューと合わせて見ると面白い。 | ||
+ | <code javascript> | ||
+ | var startFlg = false; | ||
+ | |||
+ | if (startFlg) { // | ||
+ | startFlg = false; | ||
+ | GoogleMapper.direct(latLng); | ||
+ | return ""; | ||
+ | } | ||
+ | |||
+ | startFlg = false; | ||
+ | |||
+ | var startRouting = function(mode) { | ||
+ | GoogleMapper.mapClickable = false; | ||
+ | startFlg = true; | ||
+ | GoogleMapper.direct(latLng, | ||
+ | GoogleMapper.closeInfoWindow(); | ||
+ | }; | ||
+ | |||
+ | h += "< | ||
+ | |||
+ | var modes = { | ||
+ | DRIVING: " | ||
+ | // | ||
+ | WALKING: " | ||
+ | }; | ||
+ | |||
+ | for (var mode in modes) { | ||
+ | h += '< | ||
+ | h += ' onclick=" | ||
+ | h += ' | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== 日本列島の地図を表示した時にちょうどよいサイズの沖縄のミニ地図を画面右下よりに表示する ==== | ||
+ | 日本列島と一緒に沖縄も表示させたい。 | ||
+ | <code javascript> | ||
+ | GoogleMapper.showOkinawa([markers]); | ||
+ | </ | ||
行 35: | 行 172: | ||
| | ||
| | ||
- | | + | |
- | | + | |
| | ||
* | * | ||
| | ||
- | | + | |
- | | + | |
*/ | */ | ||
var GoogleMapper = { | var GoogleMapper = { | ||
/** Mapオブジェクト */ | /** Mapオブジェクト */ | ||
map: null, | map: null, | ||
- | + | | |
- | /** 最後に開いた吹き出しオブジェクト | + | markers: [], |
- | | + | /** 吹き出し */ |
- | + | | |
- | /** 地名による検索時にリスト表示する最大件数 */ | + | |
- | | + | |
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.load = function(callback, | ||
+ | | ||
+ | |||
+ | var params = [ | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ]; | ||
+ | |||
+ | var script = document.createElement(" | ||
+ | script.type = " | ||
+ | script.src = "// | ||
+ | document.getElementsByTagName(" | ||
}; | }; | ||
/** | /** | ||
行 59: | 行 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({ | ||
- | | + | |
+ | position: position, | ||
title: (title || "" | title: (title || "" | ||
- | icon: imageUrl | + | icon: image |
}); | }); | ||
- | marker.setMap(GoogleMapper.map); | ||
- | marker.openInfoWindow = function() { | + | |
- | GoogleMapper.openInfoWindow(GoogleMapper.getInfo(marker), null, marker); | + | GoogleMapper.openMarkerWindow(marker); |
- | }; | + | }); |
- | | + | |
return marker; | return marker; | ||
}; | }; | ||
/** | /** | ||
- | | + | |
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.addColorMarker = function(lat, | ||
+ | var type = " | ||
+ | var url = GoogleMapper._getIconURL(type, | ||
+ | |||
+ | var image = new google.maps.MarkerImage( | ||
+ | url, | ||
+ | new google.maps.Size(37, | ||
+ | new google.maps.Point(0, | ||
+ | new google.maps.Point(10, | ||
+ | ); | ||
+ | |||
+ | var marker = GoogleMapper.addMarker(lat, | ||
+ | marker.setShape({coords: | ||
+ | |||
+ | return marker; | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.addBubbleMarker = function(lat, | ||
+ | var type = " | ||
+ | style = style || " | ||
+ | var icon = GoogleMapper._getIconURL(type, | ||
+ | |||
+ | var iconY = -1, shadowY = -1; | ||
+ | |||
+ | switch (style) { | ||
+ | case " | ||
+ | iconY = 35; | ||
+ | shadowY = 37; | ||
+ | break; | ||
+ | case " | ||
+ | iconY = 0; | ||
+ | shadowY = 0; | ||
+ | break; | ||
+ | } | ||
+ | |||
+ | if (iconY > -1) { | ||
+ | // | ||
+ | var point = new google.maps.Point(0, | ||
+ | icon = new google.maps.MarkerImage(icon, | ||
+ | } | ||
+ | |||
+ | var marker = GoogleMapper.addMarker(lat, | ||
+ | |||
+ | if (shadowY > -1) { | ||
+ | // | ||
+ | var shadowUrl = GoogleMapper._getIconURL(type + " | ||
+ | var shadowPoint = new google.maps.Point(0, | ||
+ | marker.setShadow(new google.maps.MarkerImage(shadowUrl, | ||
+ | } | ||
+ | |||
+ | return marker; | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper._getIconURL = function(iconType, | ||
+ | var params = [style, encodeURIComponent(str || "" | ||
+ | |||
+ | if (!style) { | ||
+ | params.shift(); | ||
+ | } | ||
+ | |||
+ | 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(/ | ||
}; | }; | ||
/** | /** | ||
行 113: | 行 428: | ||
return; | return; | ||
} | } | ||
- | | + | |
- | | + | var infoWindow = GoogleMapper.infoWindow; |
- | var infoWindow | + | infoWindow.setAnchor(null); // |
+ | infoWindow.setOptions({ content: content, position: latLng }); | ||
infoWindow.open(GoogleMapper.map, | infoWindow.open(GoogleMapper.map, | ||
- | GoogleMapper.lastInfoWindow = infoWindow; | ||
}; | }; | ||
/** | /** | ||
行 123: | 行 438: | ||
*/ | */ | ||
GoogleMapper.closeInfoWindow = function() { | GoogleMapper.closeInfoWindow = function() { | ||
- | | + | GoogleMapper.infoWindow.close(); |
- | | + | |
- | } | + | |
}; | }; | ||
/** | /** | ||
行 136: | 行 449: | ||
// | // | ||
GoogleMapper.map.disableDoubleClickZoom = true; | GoogleMapper.map.disableDoubleClickZoom = true; | ||
+ | GoogleMapper.mapClickable = true; | ||
google.maps.event.addListener(GoogleMapper.map, | google.maps.event.addListener(GoogleMapper.map, | ||
- | GoogleMapper.openInfoWindow(callback(event.latLng), | + | |
+ | | ||
+ | } else { | ||
+ | GoogleMapper.mapClickable = true; | ||
+ | } | ||
}); | }); | ||
}; | }; | ||
/** | /** | ||
- | | + | |
- | | + | |
- | | + | |
+ | | ||
+ | | ||
*/ | */ | ||
- | 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); | ||
}; | }; | ||
/** | /** | ||
行 182: | 行 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; | ||
}; | }; | ||
/** | /** | ||
| | ||
| | ||
- | | + | |
- | | + | |
- | | + | |
- | | + | |
*/ | */ | ||
- | GoogleMapper.direct = function(point, | + | GoogleMapper.direct = function(point, |
if (!GoogleMapper._router) { // | if (!GoogleMapper._router) { // | ||
- | GoogleMapper._router = { from: point, | + | GoogleMapper._router = { from: point, |
return; | return; | ||
} | } | ||
行 203: | 行 606: | ||
GoogleMapper._router = null; | GoogleMapper._router = null; | ||
- | var renderer = new google.maps.DirectionsRenderer(); | + | var renderer = new google.maps.DirectionsRenderer({ |
- | | + | |
+ | draggable: true | ||
+ | }); | ||
+ | var panel = null; | ||
panelId = (panelId || router.panelId); | panelId = (panelId || router.panelId); | ||
+ | |||
if (panelId) { // | if (panelId) { // | ||
- | | + | panel = document.getElementById(panelId); |
- | panel.innerHTML = ""; | + | panel.innerHTML = "データを取得しています< |
renderer.setPanel(panel); | renderer.setPanel(panel); | ||
- | } | ||
- | | ||
- | var mode = google.maps.DirectionsTravelMode.DRIVING; | ||
- | if (walkFlg || router.walkFlg) { | ||
- | mode = google.maps.DirectionsTravelMode.WALKING; | ||
} | } | ||
行 221: | 行 623: | ||
origin: router.from, | origin: router.from, | ||
destination: | destination: | ||
- | travelMode: mode, | + | travelMode: |
- | | + | |
- | unitSystem: google.maps.DirectionsUnitSystem.METRIC | + | unitSystem: google.maps.UnitSystem.METRIC |
}; | }; | ||
- | var callback = function(response, | + | |
+ | (new google.maps.DirectionsService()).route(request, | ||
+ | if (panel) { | ||
+ | panel.innerHTML = ""; | ||
+ | } | ||
if (GoogleMapper.checkResponseStatus(status)) { | if (GoogleMapper.checkResponseStatus(status)) { | ||
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, |
- | | + | if (!GoogleMapper.checkResponseStatus(status)) { |
- | } | + | return; |
- | | + | } |
+ | |||
+ | GoogleMapper._places | ||
+ | | ||
+ | | ||
+ | |||
+ | | ||
+ | var place = results[i]; | ||
+ | |||
+ | if (!GoogleMapper._places[place.id]) { | ||
+ | GoogleMapper.addPlace(place, | ||
+ | | ||
+ | } | ||
+ | } | ||
+ | | ||
+ | ); | ||
}; | }; | ||
/** | /** | ||
- | | + | |
- | | + | |
- | | + | |
*/ | */ | ||
- | 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, | ||
+ | (new google.maps.adsense.AdUnit(document.createElement(" | ||
+ | channelNumber: | ||
+ | format: format || google.maps.adsense.AdFormat.BANNER, | ||
+ | map: GoogleMapper.map, | ||
+ | position: position || google.maps.ControlPosition.TOP_CENTER, | ||
+ | publisherId: | ||
+ | })); | ||
}; | }; | ||
/** | /** | ||
| | ||
- | | + | |
*/ | */ | ||
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, | ||
行 285: | 行 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, | ||
行 312: | 行 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 = " | ||
行 329: | 行 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, | ||
title: origin.title, | title: origin.title, | ||
- | icon: origin.icon | + | icon: origin.icon, |
+ | shadow: origin.shadow | ||
}); | }); | ||
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); | ||
+ | } | ||
}; | }; | ||
/ | / | ||
行 347: | 行 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.addMarker(34.7, 135.5, " | + | GoogleMapper.openMarkerWindow(tokyo); |
- | var naha = GoogleMapper.addMarker(26.2, 127.7, " | + | // |
+ | GoogleMapper.addColorMarker(34.7, 135.5, " | ||
+ | | ||
+ | var naha = GoogleMapper.addBubbleMarker(26.2, 127.7, "<那覇>"); | ||
// | // | ||
GoogleMapper.showOkinawa([naha]); | GoogleMapper.showOkinawa([naha]); | ||
+ | |||
+ | // | ||
+ | GoogleMapper.setStreetView(streetViewId); | ||
// | // | ||
行 376: | 行 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.direct(latLng, | + | |
+ | GoogleMapper.direct(latLng, | ||
GoogleMapper.closeInfoWindow(); | GoogleMapper.closeInfoWindow(); | ||
}; | }; | ||
- | var btn = '< | ||
h += "< | h += "< | ||
- | h += btn + 'false)" value=" | + | |
- | h += btn + 'true)" value=" | + | DRIVING: " |
+ | // | ||
+ | WALKING: " | ||
+ | }; | ||
+ | for (var mode in modes) { | ||
+ | | ||
+ | h += ' onclick=" | ||
+ | h += ' | ||
+ | } | ||
return h; // | return h; // | ||
行 396: | 行 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); | ||
+ | } | ||
// | // | ||
- | | + | |
- | GoogleMapper.search(document.getElementById(keywordInputId).value); | + | |
+ | GoogleMapper.search(searchBox.value); | ||
+ | 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, | + | |
}; | }; | ||
</ | </ | ||
javascript/google-mapper-v3.txt · 最終更新: 2015/09/22 14:38 by dgbadmin