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)

   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" "">
<html xmlns="">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  <link rel="stylesheet" type="text/css" href="/static/basic.css"/>   

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>]`
   usermsg = `Anonymous [<a href="/webl/WubHub_DoIt?cmdline=site.login">login</a>]`

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;
  reqinfo = "Source: (none)";
  cmdinfo = "";
var header = Markup(WubCall("siteheader",[usermsg]));

   var title = (data["title"] ? "Map");

    <div id="map"></div>
      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.

        // 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() {
'map'), marker);
    <script async defer

   var cmdinfo;
   if wubinfo.cmd != nil then
      cmdinfo = "Command: "+wubinfo.cmdline;
     cmdinfo = "";

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