karaage0703/README

## README
現在地付近のカフェを表示してくれるいかしたアプリです

## jsdoit.css
* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #cccccc;
  font: 16px sans-serif;
}

#map {
    width: 420px;
    height: 600px;
    border: solid 1px;
}

#btn {
  display: block;
  text-align: center;
  width: 60px;
  height: 30px;
  line-height: 30px;
  background-color: rgba(0, 0, 255, 0.25);
  text-decoration: none;
  text-shadow: 1px 1px 3px #000;
}

## jsdoit.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>geolocation_test</title>
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
<!--

-->
      <link rel="apple-touch-icon" href="http://jsrun.it/assets/8/Q/k/7/8Qk7s.jpg" />
  </head>
  <body>
    <a href="javascript: void(0);" id="btn" onmousedown="getCurrentLocation();">現在地</a>
    <div id="map"></div>
    <div id="msg"></div>
  </body>
</html>

## jsdoit.js
var map;
var infowindow;
var currentlocation;
var lat;
var lng;

function initialize() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            getPositionOK,
            getPositionNG
        );
    } else {
        document.getElementById("msg").innerHTML = "このブラウザでは動きません。";
    }

}

function nearbySearch(loc){
//    document.getElementById("msg").innerHTML = "(latitude, longitude) = (" + loc + ")";

    var request = {
        location: loc,
        radius: 5000,
        types: ['cafe']
    };

    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, callback);
}

function getPositionOK(position) {

    lat = position.coords.latitude;
    lng = position.coords.longitude;
    currentlocation = new google.maps.LatLng(lat, lng);

    // create map
    map = new google.maps.Map(document.getElementById('map'), {
    center: currentlocation,
    zoom: 15
    });


var simpleStyle =
[
  {
    "featureType": "poi.government",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi.school",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi.park",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi.place_of_worship",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi.medical",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
  }
];

    map.setOptions({styles: simpleStyle});

    // marking current position
    var marker = new google.maps.Marker({
        map: map,
        position: currentlocation,
        icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=現|0000FF|FFFFFF'
    });

    nearbySearch(currentlocation);

    google.maps.event.addListener(map, "dragend", function(){nearbySearch(map.getCenter());});
}

// エラー時の処理
function getPositionNG(error){
    var message = "";

    switch (error.code) {

            // 位置情報が取得できない場合
        case error.POSITION_UNAVAILABLE:
            message = "位置情報の取得ができませんでした。";
            break;
            // Geolocationの使用が許可されない場合
        case error.PERMISSION_DENIED:
            message = "位置情報取得の使用許可がされませんでした。";
            break;
            // タイムアウトした場合
        case error.PERMISSION_DENIED_TIMEOUT:
            message = "位置情報取得中にタイムアウトしました。";
            break;
    }
    document.getElementById("msg").innerHTML = message;
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function getCurrentLocation(){
    initialize();
}

function createMarker(place) {
    var placeLoc = place.geometry.location;
    var placename = place.name;

    var marker;

    var komeda = place.name.indexOf("コメダ");
    var star = place.name.indexOf("スターバックス");
    var tullys = place.name.indexOf("タリーズ");
    var crie = place.name.indexOf("カフェ・ド・クリエ");
    var doutor = place.name.indexOf("ドトール");

    if(komeda != -1){
         marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location,
            icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=コ|DD0000|000000'
        });
    }else if (star != -1){
        marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location,
            icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=ス|00FF00|000000'
        });
    }else if (tullys != -1){
        marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location,
            icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=タ|95411C|FFFFFF'
        });
    }else if (crie != -1){
        marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location,
            icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=ク|ACA67B|000000'
        });
    }else if (doutor != -1){
        marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location,
            icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=ド|000000|FFFFFF'
        });
    }else{
        marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
        });
    }

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(place.name);
        infowindow.open(map, this);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
	* {
	margin: 0;
	padding: 0;
	border: 0;
	}

	body {
	background: #cccccc;
	font: 16px sans-serif;
	}

	#map {
	width: 420px;
	height: 600px;
	border: solid 1px;
	}

	#btn {
	display: block;
	text-align: center;
	width: 60px;
	height: 30px;
	line-height: 30px;
	background-color: rgba(0, 0, 255, 0.25);
	text-decoration: none;
	text-shadow: 1px 1px 3px #000;
	}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8" />
	<title>geolocation_test</title>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
	<!--

	-->
	<link rel="apple-touch-icon" href="http://jsrun.it/assets/8/Q/k/7/8Qk7s.jpg" />
	</head>
	<body>
	<a href="javascript: void(0);" id="btn" onmousedown="getCurrentLocation();">現在地</a>
	<div id="map"></div>
	<div id="msg"></div>
	</body>
	</html>
	var map;
	var infowindow;
	var currentlocation;
	var lat;
	var lng;

	function initialize() {
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(
	getPositionOK,
	getPositionNG
	);
	} else {
	document.getElementById("msg").innerHTML = "このブラウザでは動きません。";
	}

	}

	function nearbySearch(loc){
	// document.getElementById("msg").innerHTML = "(latitude, longitude) = (" + loc + ")";

	var request = {
	location: loc,
	radius: 5000,
	types: ['cafe']
	};

	infowindow = new google.maps.InfoWindow();
	var service = new google.maps.places.PlacesService(map);
	service.nearbySearch(request, callback);
	}

	function getPositionOK(position) {

	lat = position.coords.latitude;
	lng = position.coords.longitude;
	currentlocation = new google.maps.LatLng(lat, lng);

	// create map
	map = new google.maps.Map(document.getElementById('map'), {
	center: currentlocation,
	zoom: 15
	});




	var simpleStyle =
	[
	{
	"featureType": "poi.government",
	"elementType": "labels",
	"stylers": [
	{ "visibility": "off" }
	]
	},{
	"featureType": "poi.school",
	"elementType": "labels",
	"stylers": [
	{ "visibility": "off" }
	]
	},{
	"featureType": "poi.park",
	"elementType": "labels",
	"stylers": [
	{ "visibility": "off" }
	]
	},{
	"featureType": "poi.place_of_worship",
	"elementType": "labels",
	"stylers": [
	{ "visibility": "off" }
	]
	},{
	"featureType": "poi.medical",
	"elementType": "labels",
	"stylers": [
	{ "visibility": "off" }
	]
	},{
	"featureType": "landscape",
	"elementType": "labels",
	"stylers": [
	{ "visibility": "off" }
	]
	},{
	}
	];

	map.setOptions({styles: simpleStyle});

	// marking current position
	var marker = new google.maps.Marker({
	map: map,
	position: currentlocation,
	icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=現\|0000FF\|FFFFFF'
	});

	nearbySearch(currentlocation);

	google.maps.event.addListener(map, "dragend", function(){nearbySearch(map.getCenter());});
	}

	// エラー時の処理
	function getPositionNG(error){
	var message = "";

	switch (error.code) {

	// 位置情報が取得できない場合
	case error.POSITION_UNAVAILABLE:
	message = "位置情報の取得ができませんでした。";
	break;
	// Geolocationの使用が許可されない場合
	case error.PERMISSION_DENIED:
	message = "位置情報取得の使用許可がされませんでした。";
	break;
	// タイムアウトした場合
	case error.PERMISSION_DENIED_TIMEOUT:
	message = "位置情報取得中にタイムアウトしました。";
	break;
	}
	document.getElementById("msg").innerHTML = message;
	}

	function callback(results, status) {
	if (status == google.maps.places.PlacesServiceStatus.OK) {
	for (var i = 0; i < results.length; i++) {
	createMarker(results[i]);
	}
	}
	}

	function getCurrentLocation(){
	initialize();
	}

	function createMarker(place) {
	var placeLoc = place.geometry.location;
	var placename = place.name;

	var marker;

	var komeda = place.name.indexOf("コメダ");
	var star = place.name.indexOf("スターバックス");
	var tullys = place.name.indexOf("タリーズ");
	var crie = place.name.indexOf("カフェ・ド・クリエ");
	var doutor = place.name.indexOf("ドトール");

	if(komeda != -1){
	marker = new google.maps.Marker({
	map: map,
	position: place.geometry.location,
	icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=コ\|DD0000\|000000'
	});
	}else if (star != -1){
	marker = new google.maps.Marker({
	map: map,
	position: place.geometry.location,
	icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=ス\|00FF00\|000000'
	});
	}else if (tullys != -1){
	marker = new google.maps.Marker({
	map: map,
	position: place.geometry.location,
	icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=タ\|95411C\|FFFFFF'
	});
	}else if (crie != -1){
	marker = new google.maps.Marker({
	map: map,
	position: place.geometry.location,
	icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=ク\|ACA67B\|000000'
	});
	}else if (doutor != -1){
	marker = new google.maps.Marker({
	map: map,
	position: place.geometry.location,
	icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=ド\|000000\|FFFFFF'
	});
	}else{
	marker = new google.maps.Marker({
	map: map,
	position: place.geometry.location
	});
	}

	google.maps.event.addListener(marker, 'click', function() {
	infowindow.setContent(place.name);
	infowindow.open(map, this);
	});
	}

	google.maps.event.addDomListener(window, 'load', initialize);