maps_test/map2.html at master · eliagbayani/maps_test · 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Complex icons</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: -33.9, lng: 151.2}
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var infoWindow = new google.maps.InfoWindow();

function setMarkers(map)
{
    // Adds markers to the map.

    // Marker sizes are expressed as a Size of X,Y where the origin of the image
    // (0,0) is located in the top left of the image.

    // Origins, anchor positions and coordinates of the marker increase in the X
    // direction to the right and in the Y direction down.
    var image = {
    url: 'images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
    };
    // Shapes define the clickable region of the icon. The type defines an HTML
    // <area> element 'poly' which traces out a polygon as a series of X,Y points.
    // The final coordinate closes the poly by connecting to the first coordinate.
    var shape = {coords: [1, 1, 1, 20, 18, 20, 18, 1], type: 'poly'};


    for (var i = 0; i < beaches.length; i++)
    {
        var beach = beaches[i];
        var marker = new google.maps.Marker({
              position: {lat: beach[1], lng: beach[2]},
              map: map,
              // icon: image,
              // shape: shape,
              title: beach[0],
              zIndex: beach[3]
        });

        // infowindow = new google.maps.InfoWindow({
        //   content: beach[0]
        // });


        marker.addListener('click', function()
        {
            infoWindow.setContent(beach[0]);
            infoWindow.open(map, marker);
        });


        // (function (marker, data) {
        //                 google.maps.event.addListener(marker, "click", function (e) {
        //                     //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
        //                     infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
        //                     infoWindow.open(map, marker);
        //                 });
        //             })(marker, data);

    }
}

    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXt2WPrcQniaMomonEruEOi3EHYlGEi3U&signed_in=true&callback=initMap"></script>
  </body>
</html>