Part 1: Adding Google Maps to your website. Build the Getting Started applicatio
ID: 3869300 • Letter: P
Question
Part 1: Adding Google Maps to your website. Build the Getting Started application and note the location of the samples and reference; linked to from this page.
For this part, build a simple geography quiz game. Display a Google Map with three unlabeled markers on, for example, one on Minneapolis, one on Milwaukee and one on Madison. Your page should ask the user to guess which of the three markers is (for example) Madison. The user will click on one of the markers, and your page should respond by displaying a message telling the user if they correctly identified the city.
Part 2: You should display an unlabeled Satellite map; and remove the Map Controls (the box that offers Satellite, Roadmap, Terrain) so the user can't cheat.
Part 3: Add more levels to this game, for example 3 sets of cities. Display the first set of cities for the user to guess; then the second set; then the 3rd set. After the user has guessed all three, display their score out of 3.
Part 4: Let the user choose the number of cities, and the number of times they want to play.
Part 5: How could you remove the hard-coded cities? How could you pick and display a variable number of random cities?t how can you identify the nearest city? You'll need to do some geocoding/reverse geocoding. Now the user should be able to select how many cities will be in a set; and how many levels to play. Keep score and display it. https://developers.google.com/maps/documentation/javascript/geocoding
Explanation / Answer
<! DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<script>
function myGMap() {
var myCenter= new.google.maps.LatLng(19.373341,78.662109);
var mapCanvas=document.getElementById("map");
var mapOptions={center: mycenter, zoom:7};
var map=new.google.maps.Map(mapCavas,mapOptions);
var marker=new.google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
</head>
<body>
<div id="map">
</div>
<body>
<html>
>