Collaborama

Source: site.view [edit]
Function name:	map2
Arguments:	data
Description:	Display a map of a given address or coordinate point
Page type:	html
Render function:
Module:	global
Page source:
<!-- 
Map can receive as input:
   - A string representing a single address
   - An object, with attributes 
     - items: a list of items to map - list
     - title: title for the map - string
     - width: width of the map - int
     - height: height of the map - int
     - image: html pointing to an image for the item
     - showIndex: true if should showIndex on righthand side - string "true"
     - zoomLevel: an integer specifying how much to zoom (1 = tight, 14 = far) - int
   - A list of items

Each item can be an object with
   - label: label of item - string
   - addr: address of location for item - string
   - desc: a description of the item (html) - string
   - lat: latitude (optional) - string
   - long: longitude (optional) - string
or a string (address)

Note:
   For some reason, googlemap's <div id="map"> doesn't work embedded in another <div>.  Instead of doing a short "HTML snippet", I was forced to do an "HTML page" and copy most of sitepage here.

   Currently, map only accepts a string address, but I want to allow accepting a list of addresses and/or a list of data points.  This is moving towards defining types, where we can pass functions as arguments (e.g. map(restaurants(palo alto))) or use context to resolve arguments (e.g. restaurants(palo alto); map)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>WubHub</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  <link rel="stylesheet" type="text/css" href="/static/basic.css"/>   
  </head>
  <body>

<webl>
var reqinfo, cmdinfo, usermsg;

if wubinfo.user != nil then
   usermsg = `User: <a href="/webl/WubHub_DoIt?cmdline=` + wubinfo.user + `.profile">`+wubinfo.user + `</a> [<a href="/webl/WubHub_DoIt?cmdline=site.logout">logout</a>]`
else
   usermsg = `Anonymous [<a href="/webl/WubHub_DoIt?cmdline=site.login">login</a>]`
end;

if wubinfo.cmd != nil then
  reqinfo = "Source: "+wubinfo.cmd+` [<a href="/webl/WubHub_DoIt?cmdline=site.edit(`+wubinfo.cmd+`)">edit</a>]`;
  cmdinfo = "Command: "+wubinfo.cmdline;
else
  reqinfo = "Source: (none)";
  cmdinfo = "";
end;
 
var header = Markup(WubCall("siteheader",[usermsg]));
header;
</webl>


<h1><webl>
   var title = (data["title"] ? "Map");
</webl></h1>

    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: {lat: -25.363882, lng: 131.044922 }
        });

        var bounds = {
          north: -25.363882,
          south: -31.203405,
          east: 131.044922,
          west: 125.244141
        };

        // Display the area between the location southWest and northEast.
        map.fitBounds(bounds);

        // Add 5 markers to map at random locations.
        // For each of these markers, give them a title with their index, and when
        // they are clicked they should open an infowindow with text from a secret
        // message.
        var secretMessages = ['This', 'is', 'the', 'secret', 'message'];
        var lngSpan = bounds.east - bounds.west;
        var latSpan = bounds.north - bounds.south;
        for (var i = 0; i < secretMessages.length; ++i) {
          var marker = new google.maps.Marker({
            position: {
              lat: bounds.south + latSpan * Math.random(),
              lng: bounds.west + lngSpan * Math.random()
            },
            map: map
          });
          attachSecretMessage(marker, secretMessages[i]);
        }
      }

      // Attaches an info window to a marker with the provided message. When the
      // marker is clicked, the info window will open with the secret message.
      function attachSecretMessage(marker, secretMessage) {
        var infowindow = new google.maps.InfoWindow({
          content: secretMessage
        });

        marker.addListener('click', function() {
          infowindow.open(marker.get('map'), marker);
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAO2RntyX5IUgDJmXO-i39U06wwIhKwdEE&callback=initMap">
    </script>


<webl>
   var cmdinfo;
   if wubinfo.cmd != nil then
      cmdinfo = "Command: "+wubinfo.cmdline;
   else
     cmdinfo = "";
   end;

   var footer = "<p>" + cmdinfo + "</p><p>Generated by WubHub (v. "+wubinfo.wubversion+")</p>";
   footer = `<div id="footer">` + footer + "</div>";
   footer;
</webl>

  </body>
</html>