|
|
| Line 3: |
Line 3: |
| | {{Wageningen_UR/MobileMenu}} | | {{Wageningen_UR/MobileMenu}} |
| | {{Wageningen_UR/OverviewCSS}} | | {{Wageningen_UR/OverviewCSS}} |
| | + | |
| | <html> | | <html> |
| | + | |
| | <div class="container-fluid OurContent"> | | <div class="container-fluid OurContent"> |
| − | <head>
| + | |
| − | <title>Custom Markers</title>
| + | <div class="row"> |
| − | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
| + | <div class="col-md-2 hidden-xs Main-Left-Column"> |
| − | <meta charset="utf-8">
| + | </div> |
| − | <style>
| + | |
| − | /* Always set the map height explicitly to define the size of the div
| + | <div class="col-lg-8"> |
| − | * element that contains the map. */
| + | |
| − | #map {
| + | <div class="Main-Border"> |
| − | height: 100%;
| + | <div class="Main-Center-Content-Column Overview"> |
| − | }
| + | |
| − | /* Optional: Makes the sample page fill the window. */
| + | <h3>My Google Maps Demo</h3> |
| − | html, body {
| + | |
| − | height: 100%;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | </head>
| + | |
| − | <body>
| + | |
| | <div id="map"></div> | | <div id="map"></div> |
| − | <script>
| |
| − | var map;
| |
| − | function initMap() {
| |
| − | map = new google.maps.Map(document.getElementById('map'), {
| |
| − | zoom: 16,
| |
| − | center: new google.maps.LatLng(-33.91722, 151.23064),
| |
| − | mapTypeId: 'roadmap'
| |
| − | });
| |
| | | | |
| − | var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
| + | </div> |
| − | var icons = { | + | </div> |
| − | parking: {
| + | |
| − | icon: iconBase + 'parking_lot_maps.png'
| + | |
| − | },
| + | |
| − | library: {
| + | |
| − | icon: iconBase + 'library_maps.png'
| + | |
| − | },
| + | |
| − | info: {
| + | |
| − | icon: iconBase + 'info-i_maps.png'
| + | |
| − | }
| + | |
| − | };
| + | |
| | | | |
| − | var features = [ | + | <div class="col-md-2 hidden-xs Main-Right-Column"> |
| − | {
| + | </div> |
| − | position: new google.maps.LatLng(-33.91721, 151.22630),
| + | |
| − | type: 'info'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91539, 151.22820),
| + | |
| − | type: 'info'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91747, 151.22912),
| + | |
| − | type: 'info'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91910, 151.22907),
| + | |
| − | type: 'info'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91725, 151.23011),
| + | |
| − | type: 'info'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91872, 151.23089),
| + | |
| − | type: 'info'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91784, 151.23094),
| + | |
| − | type: 'info'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91682, 151.23149),
| + | |
| − | type: 'info'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91790, 151.23463),
| + | |
| − | type: 'info'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91666, 151.23468),
| + | |
| − | type: 'info'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.916988, 151.233640),
| + | |
| − | type: 'info'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
| + | |
| − | type: 'parking'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
| + | |
| − | type: 'parking'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
| + | |
| − | type: 'parking'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
| + | |
| − | type: 'parking'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
| + | |
| − | type: 'parking'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
| + | |
| − | type: 'parking'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
| + | |
| − | type: 'parking'
| + | |
| − | }, {
| + | |
| − | position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
| + | |
| − | type: 'library'
| + | |
| − | }
| + | |
| − | ]; | + | |
| | | | |
| − | // Create markers.
| + | </div> |
| − | features.forEach(function(feature) {
| + | |
| − | var marker = new google.maps.Marker({
| + | |
| − | position: feature.position,
| + | |
| − | icon: icons[feature.type].icon,
| + | |
| − | map: map
| + | |
| − | });
| + | |
| − | });
| + | |
| − | }
| + | |
| − | </script> | + | |
| − | <script async defer
| + | |
| − | src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjAo_F3TW332gqW2CBn4eiKBaXikdiPSA&callback=initMap">
| + | |
| − | </script>
| + | |
| − | </body>
| + | |
| | </div> | | </div> |
| − | </html>
| |
| | | | |
| | + | </html> |
| | | | |
| | {{Wageningen_UR/PageEnd}} | | {{Wageningen_UR/PageEnd}} |
| | {{Wageningen_UR/MainJSv2}} | | {{Wageningen_UR/MainJSv2}} |
