javascript:google-mapper-v3
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
javascript:google-mapper-v3 [2011/03/21 23:03] – 使い方の説明を微改善 dgbadmin | javascript:google-mapper-v3 [2015/09/22 14:38] (現在) – [ソースコード] 0.7.1 dgbadmin | ||
---|---|---|---|
行 5: | 行 5: | ||
{{http:// | {{http:// | ||
- | [[http://code.google.com/ | + | [[https://developers.google.com/ |
- | 普通に地図を表示する他にも、ストリートビューの表示、Google AdSenseの表示、httpsでのアクセス(SSLで暗号化されたセキュアなページの表示)など、いろいろなことを手軽に実現できる。 | + | これを使えば、普通に地図を表示する他にも、ストリートビューの表示、Google AdSenseの表示、httpsでのアクセス(SSLで暗号化されたセキュアなページの表示)など、いろいろなことを手軽に実現できる。 |
(上記の画像はGoogle Maps API V3ではなく[[php-tool-box/ | (上記の画像はGoogle Maps API V3ではなく[[php-tool-box/ | ||
行 14: | 行 14: | ||
[[http:// | [[http:// | ||
- | [[https://0-oo.googlecode.com/ | + | [[http://0-oo.net/ |
- | [[http:// | + | [[http:// |
+ | |||
+ | [[https:// | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | [[http:// | ||
行 24: | 行 34: | ||
===== ダウンロード ===== | ===== ダウンロード ===== | ||
- | [[http:// | + | [[http://g.0-oo.net/ |
※ダウンロードできるのは最新のBeta版の場合もあります | ※ダウンロードできるのは最新のBeta版の場合もあります | ||
行 30: | 行 40: | ||
===== 使い方の例 ===== | ===== 使い方の例 ===== | ||
+ | |||
+ | Google Mapper V3のソースコードの中に書いてあるGoogleMapper.demo()も参考に。 ;-) | ||
==== Google Maps APIのJavaScriptを読み込む ==== | ==== Google Maps APIのJavaScriptを読み込む ==== | ||
行 37: | 行 49: | ||
}); | }); | ||
</ | </ | ||
- | |||
- | |||
- | あとは、ソースコードの中のGoogleMapper.demo()を参考に。 ;-) | ||
- | |||
- | 例えばこんなことができる。 | ||
==== Googleマップを表示する ==== | ==== Googleマップを表示する ==== | ||
行 54: | 行 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> | ||
GoogleMapper.addBubbleMarker(26.2, | GoogleMapper.addBubbleMarker(26.2, | ||
</ | </ | ||
- | ==== ストリートビューを地図とは別の場所に表示して、地図とストリートビューを同時に見られるようにする | + | ==== 地図とストリートビューを並べて表示する ==== |
+ | デフォルトではストリートビューは地図の領域に表示されるので、地図とストリートビューを並べてみることができない。\\ | ||
+ | それでは惜しいので、地図の横にdiv要素を用意して下記のようにすれば、地図とストリートビューを並べて表示できる。 | ||
<code javascript> | <code javascript> | ||
GoogleMapper.setStreetView(streetViewId); | GoogleMapper.setStreetView(streetViewId); | ||
行 80: | 行 89: | ||
==== 広告(Google AdSense)を表示する ==== | ==== 広告(Google AdSense)を表示する ==== | ||
- | なお、AdSenseを表示するには、Google MapsのJavaScriptの読み込みでライブラリとしてAdSenseを指定する必要がある。 | + | AdSenseを表示するには、あらかじめGoogle MapsのJavaScriptの読み込みでライブラリとしてAdSenseを指定しておく必要がある。 |
<code javascript> | <code javascript> | ||
GoogleMapper.load(function() { | GoogleMapper.load(function() { | ||
行 86: | 行 95: | ||
GoogleMapper.showAds(" | GoogleMapper.showAds(" | ||
}, " | }, " | ||
+ | </ | ||
+ | |||
+ | ==== 現在位置を取得する ==== | ||
+ | iPhoneやAndroidの他、ノートPCでもWi-Fiから現在位置を取得できる。iPhoneだとタイムアウトする? | ||
+ | <code javascript> | ||
+ | GoogleMapper.getCurrentPosition(function(latLng) { | ||
+ | // (略) | ||
+ | }); | ||
</ | </ | ||
行 139: | 行 156: | ||
h += '< | h += '< | ||
h += ' onclick=" | h += ' onclick=" | ||
- | h += ' | + | h += ' |
} | } | ||
</ | </ | ||
==== 日本列島の地図を表示した時にちょうどよいサイズの沖縄のミニ地図を画面右下よりに表示する ==== | ==== 日本列島の地図を表示した時にちょうどよいサイズの沖縄のミニ地図を画面右下よりに表示する ==== | ||
+ | 日本列島と一緒に沖縄も表示させたい。 | ||
<code javascript> | <code javascript> | ||
GoogleMapper.showOkinawa([markers]); | GoogleMapper.showOkinawa([markers]); | ||
行 154: | 行 172: | ||
| | ||
| | ||
- | | + | |
- | | + | |
| | ||
* | * | ||
| | ||
- | | + | |
- | | + | |
*/ | */ | ||
var GoogleMapper = { | var GoogleMapper = { | ||
/** Mapオブジェクト */ | /** Mapオブジェクト */ | ||
map: null, | map: null, | ||
- | | ||
/** マーカーの配列 */ | /** マーカーの配列 */ | ||
markers: [], | markers: [], | ||
- | | + | |
+ | infoWindow: null, | ||
/** Mapをクリック可能か(beClickable()内でのmapのclickイベントの制御用) */ | /** Mapをクリック可能か(beClickable()内でのmapのclickイベントの制御用) */ | ||
- | mapClickable: | + | mapClickable: |
- | + | ||
- | /** 最後に開いた吹き出し */ | + | |
- | lastInfoWindow: | + | |
- | + | ||
- | /** 地名による検索時にリスト表示する最大件数 */ | + | |
- | maxCount: 10 | + | |
}; | }; | ||
/** | /** | ||
行 182: | 行 193: | ||
| | ||
| | ||
+ | | ||
*/ | */ | ||
- | GoogleMapper.load = function(callback, | + | GoogleMapper.load = function(callback, |
GoogleMapper._onload = callback; | GoogleMapper._onload = callback; | ||
- | var subDomain = (location.protocol == " | ||
var params = [ | var params = [ | ||
- | " | ||
" | " | ||
- | " | + | " |
+ | " | ||
]; | ]; | ||
var script = document.createElement(" | var script = document.createElement(" | ||
script.type = " | script.type = " | ||
- | script.src = "//" + subDomain + ".google.com/ | + | script.src = "//maps.googleapis.com/ |
document.getElementsByTagName(" | document.getElementsByTagName(" | ||
}; | }; | ||
行 204: | 行 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, | ||
+ | styles: [ // | ||
+ | { featureType: | ||
+ | ], | ||
scaleControl: | scaleControl: | ||
overviewMapControl: | overviewMapControl: | ||
overviewMapControlOptions: | 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; | ||
}; | }; | ||
/** | /** | ||
行 225: | 行 251: | ||
* | * | ||
| | ||
- | | + | |
*/ | */ | ||
GoogleMapper.addMarker = function(lat, | GoogleMapper.addMarker = function(lat, | ||
行 240: | 行 266: | ||
icon: image | icon: image | ||
}); | }); | ||
+ | |||
google.maps.event.addListener(marker, | google.maps.event.addListener(marker, | ||
GoogleMapper.openMarkerWindow(marker); | GoogleMapper.openMarkerWindow(marker); | ||
}); | }); | ||
+ | |||
GoogleMapper.markers.push(marker); | GoogleMapper.markers.push(marker); | ||
行 256: | 行 284: | ||
| | ||
| | ||
- | | + | |
*/ | */ | ||
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, | ||
行 282: | 行 311: | ||
| | ||
| | ||
- | | + | |
*/ | */ | ||
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 " | ||
行 351: | 行 381: | ||
GoogleMapper.markers[index].setMap(null); | GoogleMapper.markers[index].setMap(null); | ||
GoogleMapper.markers.splice(index, | GoogleMapper.markers.splice(index, | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.removeAllMarkers = function() { | ||
+ | for (var i = 0, len = GoogleMapper.markers.length; | ||
+ | GoogleMapper.markers[i].setMap(null); | ||
+ | } | ||
+ | |||
+ | GoogleMapper.markers = []; | ||
}; | }; | ||
/** | /** | ||
行 366: | 行 406: | ||
*/ | */ | ||
GoogleMapper.getMarkerInfo = function(marker) { | GoogleMapper.getMarkerInfo = function(marker) { | ||
- | return marker.title; | + | return |
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.escape = function(str) { | ||
+ | var rep = { "&": | ||
+ | |||
+ | return str.replace(/ | ||
}; | }; | ||
/** | /** | ||
行 379: | 行 429: | ||
} | } | ||
- | GoogleMapper.closeInfoWindow(); | + | |
- | + | infoWindow.setAnchor(null); // | |
- | | + | infoWindow.setOptions({ content: content, position: latLng }); |
infoWindow.open(GoogleMapper.map, | infoWindow.open(GoogleMapper.map, | ||
- | GoogleMapper.lastInfoWindow = infoWindow; | ||
}; | }; | ||
/** | /** | ||
行 389: | 行 438: | ||
*/ | */ | ||
GoogleMapper.closeInfoWindow = function() { | GoogleMapper.closeInfoWindow = function() { | ||
- | | + | GoogleMapper.infoWindow.close(); |
- | | + | |
- | } | + | |
}; | }; | ||
/** | /** | ||
行 411: | 行 458: | ||
} | } | ||
}); | }); | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.getCurrentPosition = function(onSuccess, | ||
+ | if (!navigator.geolocation) { | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | 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.setAutocomplete = function(inputId) { | ||
+ | var ac = new google.maps.places.Autocomplete(document.getElementById(inputId)); | ||
+ | ac.bindTo(" | ||
}; | }; | ||
/** | /** | ||
行 417: | 行 495: | ||
| | ||
| | ||
- | | + | |
*/ | */ | ||
GoogleMapper.search = function(keywords, | GoogleMapper.search = function(keywords, | ||
行 424: | 行 502: | ||
} | } | ||
- | callback = callback || function (response, status) { | + | callback = callback || function(response, |
if (!GoogleMapper.checkResponseStatus(status)) { | if (!GoogleMapper.checkResponseStatus(status)) { | ||
return; | return; | ||
行 433: | 行 511: | ||
if (len == 1) { | if (len == 1) { | ||
- | var latLng | + | var map = GoogleMapper.map; |
- | GoogleMapper.map.panTo(latLng); | + | var result = response[0]; |
- | | + | |
- | GoogleMapper.getGeocodeAddress(response[0]), | + | |
- | | + | |
- | | + | |
+ | | ||
+ | } | ||
+ | |||
+ | GoogleMapper.openInfoWindow(GoogleMapper.getGeocodeAddress(result), latLng); | ||
return; | return; | ||
- | } else if (len <= GoogleMapper.maxCount) { | + | } else if (len < 20) { |
for (var i = 0; i < len; i++) { | for (var i = 0; i < len; i++) { | ||
msg += " | msg += " | ||
行 456: | 行 538: | ||
| | ||
| | ||
- | | + | |
*/ | */ | ||
GoogleMapper.searchByLatLng = function(latLng, | GoogleMapper.searchByLatLng = function(latLng, | ||
行 462: | 行 544: | ||
}; | }; | ||
/** | /** | ||
- | | + | |
- | | + | |
- | | + | |
| | ||
*/ | */ | ||
行 472: | 行 554: | ||
return true; | return true; | ||
case " | case " | ||
- | alert(" | + | alert(" |
break; | break; | ||
default: | default: | ||
行 512: | 行 594: | ||
| | ||
| | ||
- | | + | |
| | ||
*/ | */ | ||
行 541: | 行 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 = ""; | ||
行 554: | 行 636: | ||
renderer.setDirections(response); | renderer.setDirections(response); | ||
} | } | ||
- | }; | + | }); |
- | + | ||
- | (new google.maps.DirectionsService()).route(request, | + | |
}; | }; | ||
/** | /** | ||
行 569: | 行 649: | ||
}; | }; | ||
/** | /** | ||
- | | + | * Google Placesに登録されているスポットを表示する(要Placesライブラリ) |
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.showPlaces = function(iconSize) { | ||
+ | (new google.maps.places.PlacesService(GoogleMapper.map)).search( | ||
+ | { bounds: GoogleMapper.map.getBounds() }, // | ||
+ | function(results, | ||
+ | if (!GoogleMapper.checkResponseStatus(status)) { | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | GoogleMapper._places = GoogleMapper._places || {}; | ||
+ | iconSize = (iconSize || 24); | ||
+ | var size = new google.maps.Size(iconSize, | ||
+ | |||
+ | for (var i = 0; i < results.length; | ||
+ | var place = results[i]; | ||
+ | |||
+ | if (!GoogleMapper._places[place.id]) { | ||
+ | GoogleMapper.addPlace(place, | ||
+ | GoogleMapper._places[place.id] = true; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | ); | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.addPlace = function(place, | ||
+ | var marker = new google.maps.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 | ||
+ | ); | ||
+ | } | ||
+ | ); | ||
+ | }); | ||
+ | }; | ||
+ | /** | ||
+ | * 地図上に広告(Google AdSense)を表示する(要AdSenseライブラリ) | ||
| | ||
| | ||
| | ||
| | ||
- | | + | |
*/ | */ | ||
GoogleMapper.showAds = function(pubId, | GoogleMapper.showAds = function(pubId, | ||
行 642: | 行 785: | ||
return; | return; | ||
} | } | ||
- | var duplicateMarker = function (origin) { | + | var duplicateMarker = function(origin) { |
var marker = new google.maps.Marker({ | var marker = new google.maps.Marker({ | ||
position: origin.position, | position: origin.position, | ||
行 658: | 行 801: | ||
} | } | ||
}); | }); | ||
+ | }; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | GoogleMapper.log = function(value) { | ||
+ | if (window.console && console.log) { | ||
+ | console.log(value); | ||
+ | } | ||
}; | }; | ||
/ | / | ||
行 668: | 行 820: | ||
| | ||
GoogleMapper.demo = function(mapId, | GoogleMapper.demo = function(mapId, | ||
+ | var demo = GoogleMapper.demo; | ||
+ | |||
// | // | ||
- | GoogleMapper.show(mapId); | + | |
// | // | ||
- | | + | var tokyo = GoogleMapper.addMarker(35.7, |
- | | + | |
// | // | ||
GoogleMapper.openMarkerWindow(tokyo); | GoogleMapper.openMarkerWindow(tokyo); | ||
行 679: | 行 832: | ||
GoogleMapper.addColorMarker(34.7, | GoogleMapper.addColorMarker(34.7, | ||
// | // | ||
- | var naha = GoogleMapper.addBubbleMarker(26.2, | + | var naha = GoogleMapper.addBubbleMarker(26.2, |
// | // | ||
行 700: | 行 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(); | ||
行 721: | 行 874: | ||
h += '< | h += '< | ||
h += ' onclick=" | h += ' onclick=" | ||
- | h += ' | + | h += ' |
} | } | ||
行 728: | 行 881: | ||
// | // | ||
+ | var getMarkerInfo = GoogleMapper.getMarkerInfo; | ||
GoogleMapper.getMarkerInfo = function(marker) { | GoogleMapper.getMarkerInfo = function(marker) { | ||
- | 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, | + | |
}; | }; | ||
</ | </ | ||
javascript/google-mapper-v3.txt · 最終更新: 2015/09/22 14:38 by dgbadmin