Scripts

Map Widgets for jQuery

Last Update
26 May 2012
Regular License
$6
Extended License
$30
Sales
160

Welocally Map Widgets for jQuery Makes Google Maps Easy Quickly create stunning highly styled jQuery and Google Maps v3 based maps for your next business directory, real estate guide, or travel site project. Included 2 power widgets and 3 themes with custom markers and original PSDs. Saves 60 hrs of work, installs in minutes.

Welocally Maps Quick Widgets is a set of jQuery based javascript widgets that make it easy to create highly styled customized maps using Google Maps API v3. Its perfect for creating business directory websites, travel sites, real estate guides or any website where you want to go beyond the look and feel of Google Maps and showcase real world places.

The download package includes a working demo of both widgets, and all three themes with a guide on how to use them and style them for websites.

Simplifies the Google Maps v3 API

2 Widgets Included, Place Widget and Interactive Multi Place Widget 3 Themes with custom marker and icon photoshop files included Package includes working demos with installation and styling guides

We have packaged up two widgets to help you make location aware website quickly, with a unique style and flair

What is a Welocally Place? The widgets use a data model based on JSON based 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 is a pin card style widget that makes it easy to showcase a business, real estate listing, or travel destination integrated directly with your content.

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

Multiplace Widget The multiplace widget is a fully interactive map widget, when users click on map markers it highlights the location with all the details of the place your site is showcasing. No more gigantic map balloons, or a map that looks like everyone else’s. Category maps, travel maps, destination guides, foodie sites. Its all easier with Google Maps Quick Widgets by Welocally.

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

Cloud Enabled with Google Docs 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 our products 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.