codeup-web-exercises/google_maps_api.html at master · benny-fields3rd/codeup-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
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Favorite Food Spot on Google Maps</title>
            <style type="text/css">
                #map-canvas {
                    width: 770px;
                    height: 481px;
                }
            </style>
        </head>
    <body>
    <!-- div to hold map -->
    <div id="map-canvas"></div>

        <!-- Load the Google Maps API [DON'T FORGET TO USE A KEY] -->
                                                            <!-- HIDE KEY BEFORE PUSHING TO GIT!!!!! -->
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXOnfAv0O43uduLKui_u6EOTV32kA7mM8"></script>
                                                            <!--[Your_API_key_goes_here!]-->
        <!-- Script to show address on map -->
        <script type="text/javascript">
            (function () {
                "use strict";

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

                    // This sets the center of the map at our location 29.5186519!4d-98.508089
                    center: {
                        lat:  29.5186519,
                        lng: -98.508089
                    },
                    // Show this map in satellite view 29.5185682,-98.5080466,49
                    mapTypeId: google.maps.MapTypeId.SATELLITE,
                };
                // variable for infowindow content
                var contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<h1 id="firstHeading" class="firstHeading">Ilsong Garden</h1>'+
                    '<div id="bodyContent">'+
                    '<p><strong>Ilsong Garden</strong>, also referred to as <strong>Ilsong</strong>, is a small ' +
                    'korean restaurant that not only serves korean food, but japanese and chinese '+
                    'cuisine as well. I enjoy this place because of the following dishes: '+
                    '<ul>' +
                        '<li>ChajangMyun - black bean sauced noodles</li>' +
                        '<li>Kalbi - korean style BBQ beef ribs</li>' +
                        '<li>Kimchi - assorted spicy, pickled vegetables</li>' +
                    '</ul>' +
                    '</p>' +
                    '<p>Website: Ilsong Garden, <a href="http://www.ilsonggarden.com/menu.html">'+
                    'http://www.ilsonggarden.com/menu.html</a> '+
                    '</div>'+
                    '</div>';

                // Render the map
                var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                // Create a new infoWindow object with content
                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                // Create lat and long for our marker position
                var ilSong = { lat: 29.5186519, lng: -98.508089 };

                // Add the marker to our existing map
                var foodIcon = "https://cdn3.iconfinder.com/data/icons/meanicons-4/512/meanicons_41-512.png";
                var marker = new google.maps.Marker({
                    position: ilSong,
                    map: map,
                    animation: google.maps.Animation.DROP
                });

                // Open the window using our map and marker
                // infowindow.open(map, marker);
                marker.addListener("click", function() {
                    infowindow.open(map, marker);
                });
            })();
        </script>
    </body>
</html>