Google Maps Quick Widgets

Our developer tools are founded around the data of places. Simply put, a place is all the relevant facts about a real world location, like its name, location, phone number, and website. This data is then used to set the map location and create place cards or marker maps.

//places are an array of JSON objects
var places = [
  {                                    
      "properties": {
          "phone": "+1 510 595 8000",
          "classifiers": [
              {
                  "category": "Restaurant",
                  "subcategory": "",
                  "type": "Food & Drink"
              }
          ],
          "titlelink": "http://oaklandly.com/sicily-pizza",
          "website": "http://www.sicilypizzapasta.com",
          "address": "138 14th St",
          "name": "Gourmet Sicily Pizza",
          "province": "CA",
          "owner": "welocally",
          "postcode": "94612",
          "country": "US",
          "city": "Oakland"
      },
      "geometry": {
          "type": "Point",
          "coordinates": [
              -122.2636,
              37.801379
          ]
      }
  }
];

The place widget creates a pin card for a specific place. It perfect for showcasing a specific location. Of course all of the Google Maps capabilities work also, so users can use street view to get curb appeal quickly.

//config for the widget
var cfg = { imagePath: 'images/marker_all_base.png'};

//instantiate it
var placeWidget = 
  new WELOCALLY_PlaceWidget(cfg)
    .init();

//load loacally with local place
placeWidget.loadLocal(places[0]);

The multi places widget will automatically scale to the correct view bounds to include all the place markers. When a user selects a specific place marker details like website or phone number and driving directions become visible and the map will center. This map is great for creating a set of places with a specific category, such as "Shopping" or a travel map.

//used for the place display when selected (observed)
var placeSelected = new WELOCALLY_PlaceWidget({}).init();

//config the widget, use the places array
var cfg = { 
 id:'multi_map_1',
 imagePath: 'images/marker_all_base.png',
 observers:[placeSelected],
 places: places
};

//it both objects 
placeSelected.initCfg(cfg);
var placesMulti = 
      new WELOCALLY_PlacesMultiWidget(cfg)
        .init(); 

//setup the selected area, display selected
placesMulti.getSelectedArea().append(
  placeSelected.makeWrapper());

Now you can put your places in the cloud with support for making publicly published Google Docs spreadsheets your cloud places database (only sold on binpress). Want to put a place on many sites and manage it in one place? (Multisite or Developer license) By using your Google Docs spreadsheet as the places database you now have a single source of truth with no databases required!

makes a map that looks like...

Google Docs Cloud Enabled Place Keep all the places you care about sharing on one spreadsheet, when you update that row in the database the place info gets updated too.

    var placeWidget = 
      new WELOCALLY_PlaceWidget();
  
placeWidget.initCfg({ 
    imagePath: 'images/marker_all_base.png',
});

jQuery('#wl_place_widget_wrapper').html(placeWidget.makeWrapper());                     
  
var loader = new WELOCALLY_GoogleDocsLoad({
        row: 5,
        key: '0Avb_MOw4lfVndDh2S0ZhTFdYa0Y3Qk9uNEhHZnFYVUE',
        observers: [placeWidget]
    }).init();

loader.load();

Create a Custom Places Map with Google Docs Spreadsheets Want a custom map in the cloud with just the places you care about? Remove any place from the spreadsheet and the map automatically recenters itself. All cloud places are instantly updated when you edit the spreadsheet.

    //the selected display
var placeSelected = new WELOCALLY_PlaceWidget();

//the multi map
var placesMulti = 
      new WELOCALLY_PlacesMultiWidget({ 
        id:'multi_googledocs_1',
        imagePath: 'images/marker_all_base.png',
        showSelection: false,
        showLetters: true,
        overrideSelectableStyle: 'width: 100px;',
        observers:[placeSelected]       
     }).init(); 

//setup the selected area   
placeSelected.initCfg(cfg);
placesMulti.getSelectedArea().append(placeSelected.makeWrapper());

//this is the cloud google search, shows all places in sheet
var placesSearch = new WELOCALLY_GoogleDocsSearch({
    key: '0Avb_MOw4lfVndDh2S0ZhTFdYa0Y3Qk9uNEhHZnFYVUE',
    observers: [placesMulti]
    }).init();

//get places from the google spreadsheet
placesSearch.search();

Support Site Available

Welocally wants to provide great support and build a developer community, so we have created support site for this product so you can bring up detailed technical questions. We request that you go there for technical support so people can use the comments section for simple comments about the product.