Welocally Developer JS

Welocally Quick Widgets is a jQuery based maps developer kit that makes it easy to create styled interactive maps using Google Maps API v3. The first widget is a Place Card Widget for single places, intended for showcasing a single place. The second widget is the Multiplace Widget for maps with multiple places, like a category map or a location guide. The Multiplace Widget is perfect for creating custom business directories, travel guides, or real estate guides that have flair an appeal that go beyond the standard Google Maps look and feel, and its super easy to use if you are a javascript developer.

Go Beyond Google Maps Quickly

We love the people at Google Maps, what a great foundation that makes so many things possible, and for many people it’s all they will ever need. We just decided we wanted to make it easy to do more advanced, interactive and stylized things with Google Maps and make simple with configurable widgets.

The real reason to consider using an alternative to the basic look of GMaps is your client.

If your client is happy with basic pin maps then make an embeddable map and you and your client can move on along. If your client wants beautiful interactive fully styled maps and doesn’t mind spending less than 20 dollars and about 30 mins of your time then we are a solution that makes it easy to make maps that integrate well with a site’s look and feel.

What is a Welocally Place?

Our widget’s basic data model is founded around the welocally 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
          ]
      }
  }
];

Place Widget

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.load(places[0]);

Multi Places Widget

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.

//used for the place display when selected (observed)
var placeSelected = new WELOCALLY_PlaceWidget();
 
//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());

This map is great for creating a set of places with a specific category, such as “Shopping” or a travel map.

Cloud Enabled With Google Docs

Our Quick widgets are now cloud enabled! Just publish you Google spreadsheet using our simple template and you can manage all your places in one place without the use of databases. Got a multisite license? Now you can put a place map on many sites and manage the data in one place.

This spreadsheet has been shared publicly on Google Docs. Want to see it? click here.

Google Docs Cloud Place

Googe Apps Cloud Places are cloud enabled places that can fetched remotely from your google apps spreadsheet. Just create a single worksheet spreadsheet with your places and all your sites willshow the same information. Use google docs as your cloud places database!

You can use the same spreadsheet to load one or many places, just specify the row number and the key of the spreadsheet that you published and the place will display no matter where it is.

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();

Make Custom Places Maps With Google Spreadsheets

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.

Make as many spreadsheets as you want for each custom map. Just make sure to publish each map as its own spreadsheet and you can make as many custom maps as you wish.

//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();

Developers Are Foundation

Because we are developers we think that the developer community for any technology company, even small ones like ours, is essential. That means we really want to get you involved and listen to your feedback. Make sure to join our mailing list for important updates and deals. If you use our products please tell us what you think, we love to hear how we can improve and make our product better. If you think we can do better please tell us. Trolls we can live without, but real feedback on ways that we can improve are an honor to receive.