GeoTechTalk InkSatogaeri Project

?Download as KEY, PDF?

0 likes?1,934 views

The document discusses various Google Maps APIs and techniques, including: 1) Using the Geolocation API to get a user's location and center the map. It discusses handling different browser implementations. 2) Making HTTP requests to retrieve JSON data and parse the response to use in the map. 3) Using the Geocoding API to center the map based on an address. 4) Adding Street View panoramas to a map when visible. 5) Calculating directions between points using the Directions API. 6) Best practices for markers, info windows, and map bounds handling.

GeoLocationAPI

GeoLocationAPI
If(navigator.geolocation){//
wid = navigator.geolocation.watchPosition(update);
}

GeoLocationAPI

GeoLocationAPI
If(navigator.geolocation){//
wid = navigator.geolocation.watchPosition(update);
}
Android
if(!navigator.geolocation) navigator.geolocation = google.gears.factory.create('beta.geolocation');

Data Get

var httpObj = createHttpRequest();
httpObj.open("GET",url,true);
httpObj.onreadystatechange = function() {
if (httpObj.readyState == 4 && httpObj.status == 200){
if(httpObj.responseText != ""){
obj = eval("("+httpObj.responseText+")");
}
}
httpObj.send(null);
}

$(function() {
$.getJSON("data.json",function(obj){
hoge(obj);
});
});

GeoCoding

//
var gc = new google.maps.Geocoder();
gc.geocode({ address : adrs }, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}else{
alert(status+" : ");
}
});

StreetView

//
var svp = new google.maps.StreetViewPanorama(
document.getElementById("streetview"), {
position : new google.maps.LatLng(lat,lng)
}
);
if(svp.getVisible()){
map.setStreetView(svp);
}

Directions

//
var directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions);
directionsRenderer.setMap(map);
var request = {
origin: point1,
destination: point2,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(result, status){
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});

Tips

//
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
markersArray.push(marker);

//infoWindow
google.maps.event.addListener(marker, "click", function() {
infowindow = new google.maps.InfoWindow({
content: html
});
if (currentInfoWindow) {
currentInfoWindow.close();
}
infowindow.open(map, marker);
currentInfoWindow = infowindow;
});

Tips

Charset

Infowindow
Charset HTML
window.parent.document.f
orm.

V2 V3

Tips

//For Client
rc = map.getBounds();
mapArea = rc.getSouthWest() +","+rc.getNorthEast();
var url = "http://hoge/fuga.php?ll="+mapArea+"&cache="+(new Date()).getTime();
var httpObj = createHttpRequest();
httpObj.open("GET",url,true);
httpObj.send(null);

NE(lat,lng)

SW(lat,lng)

Tips

URL
→

→

→

→
Server→Network→Browser

MashupAward
MashupAward6
API
GoogleMaps → →
→ or API
→ →

Data

API

RememberBox

http://ibox.geo.jp/

OAuth Twitter
!

?

RememberBox

http://ibox.geo.jp/

OAuth Twitter
!

Box

?

GeoTechTalk InkSatogaeri Project

1. 2011/3/7 Google

2. ■ ■ ABC ■ / / / 6 ( 3639 )

4. http://www.inksatogaeri.jp/

5. http://www.inksatogaeri.jp/

6. http://www.inksatogaeri.jp/

7. http://www.inksatogaeri.jp/

13. GeoLocationAPI GeoLocationAPI If(navigator.geolocation){// wid = navigator.geolocation.watchPosition(update); }

14. GeoLocationAPI GeoLocationAPI If(navigator.geolocation){// wid = navigator.geolocation.watchPosition(update); } Android if(!navigator.geolocation) navigator.geolocation = google.gears.factory.create('beta.geolocation');

15. GeoLocationAPI GeoLocationAPI If(navigator.geolocation){// wid = navigator.geolocation.watchPosition(update); } Android if(!navigator.geolocation) navigator.geolocation = google.gears.factory.create('beta.geolocation'); // function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var currentPos = new google.maps.LatLng(lat, lng); map.setCenter(currentPos); // navigator.geolocation.clearWatch(wid); }

16. Data Get var httpObj = createHttpRequest(); httpObj.open("GET",url,true); httpObj.onreadystatechange = function() { if (httpObj.readyState == 4 && httpObj.status == 200){ if(httpObj.responseText != ""){ obj = eval("("+httpObj.responseText+")"); } } httpObj.send(null); } $(function() { $.getJSON("data.json",function(obj){ hoge(obj); }); });

17. GeoCoding // var gc = new google.maps.Geocoder(); gc.geocode({ address : adrs }, function(results, status){ if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); }else{ alert(status+" : "); } });

18. StreetView // var svp = new google.maps.StreetViewPanorama( document.getElementById("streetview"), { position : new google.maps.LatLng(lat,lng) } ); if(svp.getVisible()){ map.setStreetView(svp); }

19. Directions // var directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions); directionsRenderer.setMap(map); var request = { origin: point1, destination: point2, travelMode: google.maps.DirectionsTravelMode.WALKING }; var directionsService = new google.maps.DirectionsService(); directionsService.route(request, function(result, status){ if (status == google.maps.DirectionsStatus.OK) { directionsRenderer.setDirections(result); } });

20. Tips // function clearOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(null); } } } markersArray.push(marker); //infoWindow google.maps.event.addListener(marker, "click", function() { infowindow = new google.maps.InfoWindow({ content: html }); if (currentInfoWindow) { currentInfoWindow.close(); } infowindow.open(map, marker); currentInfoWindow = infowindow; });

21. Tips Charset Infowindow Charset HTML window.parent.document.f orm. V2 V3

22. Tips //For Client rc = map.getBounds(); mapArea = rc.getSouthWest() +","+rc.getNorthEast(); var url = "http://hoge/fuga.php?ll="+mapArea+"&cache="+(new Date()).getTime(); var httpObj = createHttpRequest(); httpObj.open("GET",url,true); httpObj.send(null); NE(lat,lng) SW(lat,lng)

23. Tips //For Client rc = map.getBounds(); mapArea = rc.getSouthWest() +","+rc.getNorthEast(); var url = "http://hoge/fuga.php?ll="+mapArea+"&cache="+(new Date()).getTime(); var httpObj = createHttpRequest(); httpObj.open("GET",url,true); httpObj.send(null); //For Server $sql = "SELECT * FROM hoge where ((lat BETWEEN $swlat and $nelat) and (lng BETWEEN $swlng and $nelng))"; NE(lat,lng) SW(lat,lng)

24. Tips URL → → → → Server→Network→Browser

25. MashupAward MashupAward6 API GoogleMaps → → → or API → → Data API

27. RememberBox http://ibox.geo.jp/

28. RememberBox http://ibox.geo.jp/ ?

29. RememberBox http://ibox.geo.jp/ OAuth Twitter ! ?

30. RememberBox http://ibox.geo.jp/ OAuth Twitter ! Box ?

31. Thanks a lot !

Editor's Notes

#2: \n
#3: \n
#4: \n
#5: 3600&#x306E;&#x90F5;&#x4FBF;&#x5C40;\n1500&#x306E;&#x81EA;&#x6CBB;&#x4F53;&#x95A2;&#x9023;&#x65BD;&#x8A2D;\n
#6: 3600&#x306E;&#x90F5;&#x4FBF;&#x5C40;\n1500&#x306E;&#x81EA;&#x6CBB;&#x4F53;&#x95A2;&#x9023;&#x65BD;&#x8A2D;\n
#7: 3600&#x306E;&#x90F5;&#x4FBF;&#x5C40;\n1500&#x306E;&#x81EA;&#x6CBB;&#x4F53;&#x95A2;&#x9023;&#x65BD;&#x8A2D;\n
#8: &#x30DB;&#x30FC;&#x30E0;&#x30DA;&#x30FC;&#x30B8;&#x30EA;&#x30EA;&#x30FC;&#x30B9;&#x307E;&#x3067;&#x5F8C;&#x308F;&#x305A;&#x304B;&#x30FB;&#x30FB;&#x30FB;\nMapsAPI&#x3067;&#x30D7;&#x30ED;&#x30C8;&#x3092;&#x30B5;&#x30AF;&#x30C3;&#x3068;&#x4F5C;&#x6210;&#xFF01;&#x304A;&#x3001;&#x3044;&#x3044;&#x306D;&#xFF01;&#x63A1;&#x7528;&#xFF01;\n&#x4E00;&#x753B;&#x9762;&#x3067;&#x30B7;&#x30F3;&#x30D7;&#x30EB;&#x306A;&#x304C;&#x3089;&#x3082;&#x305F;&#x304F;&#x3055;&#x3093;&#x306E;&#x6A5F;&#x80FD;&#x304C;&#x8A70;&#x307E;&#x3063;&#x3066;&#x3044;&#x308B;&#xFF08;&#x30C7;&#x30E2;\n&#x2460;&#x81EA;&#x52D5;&#x4F4D;&#x7F6E;&#x53D6;&#x5F97;&#x3000;&#x2461;&#x5730;&#x540D;&#x3067;&#x691C;&#x7D22;&#x3000;&#x2462;&#x5916;&#x89B3;&#x306E;&#x5199;&#x771F;&#x3092;&#x8868;&#x793A;&#x3000;&#x2463;&#x30DA;&#x30FC;&#x30B8;&#x3078;&#x306E;&#x30EA;&#x30F3;&#x30AF;&#x3000;&#x2464;&#x9053;&#x9806;&#x3092;&#x30CA;&#x30D3;&#x3000;&#x2465;&#x30AB;&#x30FC;&#x30C8;&#x30EA;&#x30C3;&#x30B8;&#x306E;&#x691C;&#x7D22;&#x3000;&#x2466;&#x30D4;&#x30F3;&#x30DD;&#x30A4;&#x30F3;&#x30C8;&#x8868;&#x793A;http://inksatogaeri.geo.jp/map/index3.html?p=10100\n
#9: &#x30DB;&#x30FC;&#x30E0;&#x30DA;&#x30FC;&#x30B8;&#x30EA;&#x30EA;&#x30FC;&#x30B9;&#x307E;&#x3067;&#x5F8C;&#x308F;&#x305A;&#x304B;&#x30FB;&#x30FB;&#x30FB;\nMapsAPI&#x3067;&#x30D7;&#x30ED;&#x30C8;&#x3092;&#x30B5;&#x30AF;&#x30C3;&#x3068;&#x4F5C;&#x6210;&#xFF01;&#x304A;&#x3001;&#x3044;&#x3044;&#x306D;&#xFF01;&#x63A1;&#x7528;&#xFF01;\n&#x4E00;&#x753B;&#x9762;&#x3067;&#x30B7;&#x30F3;&#x30D7;&#x30EB;&#x306A;&#x304C;&#x3089;&#x3082;&#x305F;&#x304F;&#x3055;&#x3093;&#x306E;&#x6A5F;&#x80FD;&#x304C;&#x8A70;&#x307E;&#x3063;&#x3066;&#x3044;&#x308B;&#xFF08;&#x30C7;&#x30E2;\n&#x2460;&#x81EA;&#x52D5;&#x4F4D;&#x7F6E;&#x53D6;&#x5F97;&#x3000;&#x2461;&#x5730;&#x540D;&#x3067;&#x691C;&#x7D22;&#x3000;&#x2462;&#x5916;&#x89B3;&#x306E;&#x5199;&#x771F;&#x3092;&#x8868;&#x793A;&#x3000;&#x2463;&#x30DA;&#x30FC;&#x30B8;&#x3078;&#x306E;&#x30EA;&#x30F3;&#x30AF;&#x3000;&#x2464;&#x9053;&#x9806;&#x3092;&#x30CA;&#x30D3;&#x3000;&#x2465;&#x30AB;&#x30FC;&#x30C8;&#x30EA;&#x30C3;&#x30B8;&#x306E;&#x691C;&#x7D22;&#x3000;&#x2466;&#x30D4;&#x30F3;&#x30DD;&#x30A4;&#x30F3;&#x30C8;&#x8868;&#x793A;http://inksatogaeri.geo.jp/map/index3.html?p=10100\n
#10: &#x30DB;&#x30FC;&#x30E0;&#x30DA;&#x30FC;&#x30B8;&#x30EA;&#x30EA;&#x30FC;&#x30B9;&#x307E;&#x3067;&#x5F8C;&#x308F;&#x305A;&#x304B;&#x30FB;&#x30FB;&#x30FB;\nMapsAPI&#x3067;&#x30D7;&#x30ED;&#x30C8;&#x3092;&#x30B5;&#x30AF;&#x30C3;&#x3068;&#x4F5C;&#x6210;&#xFF01;&#x304A;&#x3001;&#x3044;&#x3044;&#x306D;&#xFF01;&#x63A1;&#x7528;&#xFF01;\n&#x4E00;&#x753B;&#x9762;&#x3067;&#x30B7;&#x30F3;&#x30D7;&#x30EB;&#x306A;&#x304C;&#x3089;&#x3082;&#x305F;&#x304F;&#x3055;&#x3093;&#x306E;&#x6A5F;&#x80FD;&#x304C;&#x8A70;&#x307E;&#x3063;&#x3066;&#x3044;&#x308B;&#xFF08;&#x30C7;&#x30E2;\n&#x2460;&#x81EA;&#x52D5;&#x4F4D;&#x7F6E;&#x53D6;&#x5F97;&#x3000;&#x2461;&#x5730;&#x540D;&#x3067;&#x691C;&#x7D22;&#x3000;&#x2462;&#x5916;&#x89B3;&#x306E;&#x5199;&#x771F;&#x3092;&#x8868;&#x793A;&#x3000;&#x2463;&#x30DA;&#x30FC;&#x30B8;&#x3078;&#x306E;&#x30EA;&#x30F3;&#x30AF;&#x3000;&#x2464;&#x9053;&#x9806;&#x3092;&#x30CA;&#x30D3;&#x3000;&#x2465;&#x30AB;&#x30FC;&#x30C8;&#x30EA;&#x30C3;&#x30B8;&#x306E;&#x691C;&#x7D22;&#x3000;&#x2466;&#x30D4;&#x30F3;&#x30DD;&#x30A4;&#x30F3;&#x30C8;&#x8868;&#x793A;http://inksatogaeri.geo.jp/map/index3.html?p=10100\n
#11: &#x30DB;&#x30FC;&#x30E0;&#x30DA;&#x30FC;&#x30B8;&#x30EA;&#x30EA;&#x30FC;&#x30B9;&#x307E;&#x3067;&#x5F8C;&#x308F;&#x305A;&#x304B;&#x30FB;&#x30FB;&#x30FB;\nMapsAPI&#x3067;&#x30D7;&#x30ED;&#x30C8;&#x3092;&#x30B5;&#x30AF;&#x30C3;&#x3068;&#x4F5C;&#x6210;&#xFF01;&#x304A;&#x3001;&#x3044;&#x3044;&#x306D;&#xFF01;&#x63A1;&#x7528;&#xFF01;\n&#x4E00;&#x753B;&#x9762;&#x3067;&#x30B7;&#x30F3;&#x30D7;&#x30EB;&#x306A;&#x304C;&#x3089;&#x3082;&#x305F;&#x304F;&#x3055;&#x3093;&#x306E;&#x6A5F;&#x80FD;&#x304C;&#x8A70;&#x307E;&#x3063;&#x3066;&#x3044;&#x308B;&#xFF08;&#x30C7;&#x30E2;\n&#x2460;&#x81EA;&#x52D5;&#x4F4D;&#x7F6E;&#x53D6;&#x5F97;&#x3000;&#x2461;&#x5730;&#x540D;&#x3067;&#x691C;&#x7D22;&#x3000;&#x2462;&#x5916;&#x89B3;&#x306E;&#x5199;&#x771F;&#x3092;&#x8868;&#x793A;&#x3000;&#x2463;&#x30DA;&#x30FC;&#x30B8;&#x3078;&#x306E;&#x30EA;&#x30F3;&#x30AF;&#x3000;&#x2464;&#x9053;&#x9806;&#x3092;&#x30CA;&#x30D3;&#x3000;&#x2465;&#x30AB;&#x30FC;&#x30C8;&#x30EA;&#x30C3;&#x30B8;&#x306E;&#x691C;&#x7D22;&#x3000;&#x2466;&#x30D4;&#x30F3;&#x30DD;&#x30A4;&#x30F3;&#x30C8;&#x8868;&#x793A;http://inksatogaeri.geo.jp/map/index3.html?p=10100\n
#12: \n
#13: \n
#14: \n
#15: \n
#16: \n
#17: \n
#18: directionsRenderer.setMap(null);Directions&#x306E;&#x30EB;&#x30FC;&#x30C8;&#x3082;&#x3053;&#x308C;&#x3067;&#x6D88;&#x53BB;&#x53EF;&#x80FD;\n
#19: \n
#20: \n
#21: \n
#22: \n
#23: \n
#24: &#x753B;&#x9762;&#x3068;&#x30B3;&#x30F3;&#x30BB;&#x30D7;&#x30C8;&#x7D39;&#x4ECB;\n&#x30C7;&#x30E2;\n
#25: &#x753B;&#x9762;&#x3068;&#x30B3;&#x30F3;&#x30BB;&#x30D7;&#x30C8;&#x7D39;&#x4ECB;\n&#x30C7;&#x30E2;\n
#26: &#x753B;&#x9762;&#x3068;&#x30B3;&#x30F3;&#x30BB;&#x30D7;&#x30C8;&#x7D39;&#x4ECB;\n&#x30C7;&#x30E2;\n
#27: \n

狠狠撸

GeoTechTalk InkSatogaeri Project

More Related Content

GeoTechTalk InkSatogaeri Project

Editor's Notes