redwood_web_exercises/google-maps.html at master · CodeupClassroom/redwood_web_exercises · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Maps</title>
    <style>
        #map{
            height: 500px;
            width: 100%;
        }
    </style>
</head>
<body>

    <div id="map"></div>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCjGmzAFzu_zP8-hpg9XmvQqxf9OcHe2U"></script>

    <script type="text/javascript">
        (function(){
            "use strict";

            var address = "Geekdom";
            var home = { lat: 19.4064, lng: -102.0430 };

            var codeup = { lat: 29.426791, lng: -98.489602 };


            // Set our map options
            var mapOptions = {
                // Set the zoom level
                zoom: 5,

                // This sets the center of the map at our location
                center: codeup,
                mapTypeId: "roadmap"
            };

            var geocoder = new google.maps.Geocoder();

            // Uncomment this section if you want to use the geocoder (find a place by a string)

//            geocoder.geocode(
//                { "address": address }, function(results, status) {
//
//                // Check for a successful result
//                if (status == google.maps.GeocoderStatus.OK) {
//
//                    console.log(results);
//
//                    // Recenter the map over the address
//                    map.setCenter(results[0].geometry.location);
//                } else {
//
//                    // Show an error message with the status if our request fails
//                    alert("Geocoding was not successful - STATUS: " + status);
//                }
//            });


            var map = new google.maps.Map(document.getElementById("map"), mapOptions);

            var marker = new google.maps.Marker({
                position: codeup,
                map: map
            });

            var infowindow = new google.maps.InfoWindow({
                content: "<a href='#'>Changing</a> the world, one programmer at a time."
            });

            infowindow.open(map, marker);


        })();
    </script>


</body>
</html>