API tools faq
paste
max_tre

mapbis.html

max_tre
Apr 11th, 2017
50
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.49 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Parcheggi Festa della Fragola</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  6.     <meta charset="utf-8">
  7.     <style>
  8.       /* Always set the map height explicitly to define the size of the div
  9.        * element that contains the map. */
  10.       #map {
  11.         height: 100%;
  12.       }
  13.       /* Optional: Makes the sample page fill the window. */
  14.       html, body {
  15.         height: 100%;
  16.         margin: 0;
  17.         padding: 0;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div id="map"></div>
  23.     <script>
  24.       var map;
  25.       function initMap() {
  26.         map = new google.maps.Map(document.getElementById('map'), {
  27.           zoom: 15,
  28.           center: new google.maps.LatLng(45.570058, 11.932437),
  29.           mapTypeId: 'roadmap'
  30.         });
  31.  
  32.         var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
  33.         var icons = {
  34.           parking: {
  35.             icon: 'parking_lot_maps.png' /*iconBase + 'parking_lot_maps.png'*/
  36.           },
  37.           library: {
  38.             icon: iconBase + 'library_maps.png'
  39.           },
  40.           info: {
  41.             icon: iconBase + 'info-i_maps.png'
  42.           },
  43.           verde: {icon: 'verde.png'},
  44.           giallo: {icon: 'giallo.png'},
  45.           rosso: {icon: 'rosso.png'},
  46.         };
  47.  
  48.         var features = [
  49.           {
  50.             position: new google.maps.LatLng(45.566517, 11.937161),
  51.             type: 'giallo', label: 'P1',
  52.           },
  53.           {
  54.             position: new google.maps.LatLng(45.568067, 11.934739),
  55.             type: 'rosso', label: 'P2',
  56.           },
  57.           {
  58.             position: new google.maps.LatLng(45.566107, 11.931922),
  59.             type: 'giallo', label: 'P3',
  60.           },
  61.           {
  62.             position: new google.maps.LatLng(45.565401, 11.931939),
  63.             type: 'rosso', label: 'P4',
  64.           },
  65.           {
  66.             position: new google.maps.LatLng(45.568165, 11.928356),
  67.             type: 'giallo', label: 'P5',
  68.           },
  69.           {
  70.             position: new google.maps.LatLng(45.569585, 11.927449),
  71.             type: 'verde', label: 'P6',
  72.           },
  73.           {
  74.             position: new google.maps.LatLng(45.570599, 11.929563),
  75.             type: 'rosso', label: 'P7',
  76.           },
  77.           {
  78.             position: new google.maps.LatLng(45.571593, 11.937362),
  79.             type: 'verde', label: 'P8',
  80.           },
  81.           {
  82.             position: new google.maps.LatLng(45.572769, 11.936571),
  83.             type: 'giallo', label: 'P9',
  84.           },
  85.           {
  86.             position: new google.maps.LatLng(45.570467, 11.938746),
  87.             type: 'verde', label: 'P10',
  88.           },
  89.           {
  90.             position: new google.maps.LatLng(45.574234, 11.937247),
  91.             type: 'rosso', label: 'P11',
  92.           },
  93.           {
  94.             position: new google.maps.LatLng(45.566224, 11.928683),
  95.             type: 'verde', label: 'P12',
  96.           },
  97.         ];
  98.  
  99.         // Create markers.
  100.         features.forEach(function(feature) {
  101.           var marker = new google.maps.Marker({
  102.             position: feature.position,
  103.             icon: icons[feature.type].icon,
  104.             map: map,
  105.             label: {text: feature.label, color: "black"},
  106.           });
  107.         });
  108.       }
  109.     </script>
  110.     <script async defer
  111.    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4tHxdtESGK0HBuHGkbxpDkxk1tmcujB4&callback=initMap">
  112.     </script>
  113.   </body>
  114. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!