damusnet/api.js

## api.js
// Détecter le click
// https://developers.google.com/maps/documentation/javascript/events
google.maps.event.addListener(map, 'click', function(event) {

});

// Objet latLng
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#LatLng
latLng = new google.maps.LatLng(
  46.2157467,
  2.2096957
);

// Calculer une distance
// https://developers.google.com/maps/documentation/javascript/geometry
google.maps.geometry.spherical.computeDistanceBetween(
  latLng1,
  latLng2
);

// Poser un marker
// https://developers.google.com/maps/documentation/javascript/markers
var marker = new google.maps.Marker({
  position: latlng,
  icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
  map: map,
  title: 'red marker'
});

## cities.js
var cities = [
  {
    name: 'Paris',
    lat: 48.856614,
    lng: 2.3522219
  },
  {
    name: 'Bordeaux',
    lat: 44.837789,
    lng: -0.579179
  },
  {
    name: 'Toulouse',
    lat: 43.604652,
    lng: 1.4442090,
  },
  {
    name: 'Rouen',
    lat: 49.443231,
    lng: 1.0999709,
  },
  {
    name: 'Reims',
    lat: 49.258329,
    lng: 4.0316960,
  },
  {
    name: 'Lyon',
    lat: 45.764043,
    lng: 4.8356589,
  },
  {
    name: 'Marseille',
    lat: 43.296482,
    lng: 5.3697799,
  },
];

## index.html
<!DOCTYPE html>
<html>
  <head>
    <link href="./style.css" media="all" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyBazuQyVhjJ3_ywVLGxUjhaRi2E091PbVc"></script>
    <script type="text/javascript" src="./cities.js"></script>
    <script type="text/javascript" src="./script.js"></script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div id="ui">
      <h1>Où se situe...</h1>
      <h2><span id="city"></span> ?</h2>
    </div>
  </body>
</html>

## script.js
/* Afficher une carte de france
 * Charger une ville en aléatoire
 * Capter le click et la position lat/lng
 * Comparer avec la lat/lng de la ville
 * Poser un marker avec rouge si loin, vert si près
 */

function initialize() {

  var MY_MAPTYPE_ID = 'mymap';

  var mapOptions = {
    center: {
      lat: 46.2157467,
      lng: 2.2096957
    },
    zoom: 6,
    mapTypeId: MY_MAPTYPE_ID
  };

  var style = [{
    featureType: "all",
    elementType: "labels",
    stylers: [{
      visibility: "off"
    }]
  }];

  var map = new google.maps.Map(
    document.getElementById('map-canvas'),
    mapOptions
  );

  var styledMapOptions = {
    name: "No Labels"
  };

  var mapType = new google.maps.StyledMapType(style, styledMapOptions);

  map.mapTypes.set(MY_MAPTYPE_ID, mapType);
  map.setMapTypeId(MY_MAPTYPE_ID);

}

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

## style.css
html, body, #map-canvas {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#ui {
  position: fixed;
  bottom: 10px;
  left: 10px;
  background-color: white;
  border-radius: 5px;
  width: 300px;
  height: 150px;
  padding: 10px;
}

h2 {
  text-align: right;
}
	// Détecter le click
	// https://developers.google.com/maps/documentation/javascript/events
	google.maps.event.addListener(map, 'click', function(event) {

	});

	// Objet latLng
	// https://developers.google.com/maps/documentation/javascript/3.exp/reference#LatLng
	latLng = new google.maps.LatLng(
	46.2157467,
	2.2096957
	);

	// Calculer une distance
	// https://developers.google.com/maps/documentation/javascript/geometry
	google.maps.geometry.spherical.computeDistanceBetween(
	latLng1,
	latLng2
	);

	// Poser un marker
	// https://developers.google.com/maps/documentation/javascript/markers
	var marker = new google.maps.Marker({
	position: latlng,
	icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
	map: map,
	title: 'red marker'
	});
	var cities = [
	{
	name: 'Paris',
	lat: 48.856614,
	lng: 2.3522219
	},
	{
	name: 'Bordeaux',
	lat: 44.837789,
	lng: -0.579179
	},
	{
	name: 'Toulouse',
	lat: 43.604652,
	lng: 1.4442090,
	},
	{
	name: 'Rouen',
	lat: 49.443231,
	lng: 1.0999709,
	},
	{
	name: 'Reims',
	lat: 49.258329,
	lng: 4.0316960,
	},
	{
	name: 'Lyon',
	lat: 45.764043,
	lng: 4.8356589,
	},
	{
	name: 'Marseille',
	lat: 43.296482,
	lng: 5.3697799,
	},
	];
	<!DOCTYPE html>
	<html>
	<head>
	<link href="./style.css" media="all" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyBazuQyVhjJ3_ywVLGxUjhaRi2E091PbVc"></script>
	<script type="text/javascript" src="./cities.js"></script>
	<script type="text/javascript" src="./script.js"></script>
	</head>
	<body>
	<div id="map-canvas"></div>
	<div id="ui">
	<h1>Où se situe...</h1>
	<h2><span id="city"></span> ?</h2>
	</div>
	</body>
	</html>
	/* Afficher une carte de france
	* Charger une ville en aléatoire
	* Capter le click et la position lat/lng
	* Comparer avec la lat/lng de la ville
	* Poser un marker avec rouge si loin, vert si près
	*/

	function initialize() {

	var MY_MAPTYPE_ID = 'mymap';

	var mapOptions = {
	center: {
	lat: 46.2157467,
	lng: 2.2096957
	},
	zoom: 6,
	mapTypeId: MY_MAPTYPE_ID
	};

	var style = [{
	featureType: "all",
	elementType: "labels",
	stylers: [{
	visibility: "off"
	}]
	}];

	var map = new google.maps.Map(
	document.getElementById('map-canvas'),
	mapOptions
	);

	var styledMapOptions = {
	name: "No Labels"
	};

	var mapType = new google.maps.StyledMapType(style, styledMapOptions);

	map.mapTypes.set(MY_MAPTYPE_ID, mapType);
	map.setMapTypeId(MY_MAPTYPE_ID);

	}

	google.maps.event.addDomListener(
	window,
	'load',
	initialize
	);
	html, body, #map-canvas {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	}

	#ui {
	position: fixed;
	bottom: 10px;
	left: 10px;
	background-color: white;
	border-radius: 5px;
	width: 300px;
	height: 150px;
	padding: 10px;
	}

	h2 {
	text-align: right;
	}