Quick and
Easy
Installation

Get our plugins up and running on any website in minutes, fully configurable to your agency’s requirements and website design. Full complimentary technical support is included.

Get Started

Trusted by Industry Leaders

Integration Instructions

Three easy steps

Adding our plugins, to any website, is super quick and easy; with just three simple steps, that can be completed in minutes.

Our plugins are extemely flexible and configurable; for example, you can change colours, fonts and map styles, turn different functionality on and off, and our plugins can even interact with other elements on the page.

We offer full, complimentary support throughout your time with us and configure the plugins to match your website style at launch, free of charge.

Please get in touch for more details and support in getting started.

01Include our Javascript API

Simply add a line in the page <head> section, to include our small Javascript API library.

Show Me

02Add a <div> control

Decide where you want the plugin to appear on your page and add a HTML <div> element to contain it.

Show Me

03Populate the <div>

With one Javascript call to our API you can populate the <div> with one of our plugins - and that's it!

Show Me


1. Include our Javascript API

Our plugins are managed by our small Javascript API that needs to be referenced just once, usually in the <head> section, of each page you wish to have a plugin appear, as below:

<!-- Locrating Javascript API -->
<script defer src="https://www.locrating.com/scripts/locratingIntegrationScripts.js"></script>
             

2. Add a <div> control

To embed a plugin into you webpage, you first need create an <div> to hold it, as below:

<!-- DIV to hold Locrating plugin -->
<div id="map" style="width:100%; height:600px;"></div>
             

You can chose your own dimensions and use a fixed or a dynamic size as all our plugins are fully responsive (i.e. their content adjusts the their size). You can chose to have a border as above, or not, it's totally up to you.


3. Populate the <div>

In an appropriate event, such as the onclick event of a Tab control. Call our API function loadLocratingPlugin, passing the id of the <div>, the lat and lng coordinates you wish the plugin to be centred around and the type of plugin you wish to display.

The example below, uses the <body> onload event to populate our all-in-one plugin.

<!-- Load Locrating All-in-one Plugin -->
<body onload="try{loadLocratingPlugin({id:'map', lat: 51.456913, lng : -0.073099, type:'all'});}catch (err) {};"></body>
             

Configuration

Our plugins are highly customisable, so they can easily be configured to match the design of you site. See here for same examples. We offer full, complimentary support throughout your time with us and configure the plugins to match your website style at launch, free of charge.

Please get in touch for more details and support regarding configuration options.


Adding markers and shapes

It's possible to add you own markers to our plugin maps, for example, your own properties for sale or rent, which allows our plugins to be used in a variety of ways, such as a map of branches or property search results on a map.

Note: We are happy to extend our API on request, if you need additional features not currently supported. Please get in touch so we can discuss your requirements.

Draw-a-search

Draw-a-search allows you to not only add your own markers to our maps, but to only show markers that are inside user drawn shapes on the map; You can see a working example of Draw-a-search here.

Draw a shape on the map below to see this is action; click the first button under the zoom controls in the top left of the map to start drawing. You can draw multiple shapes and later edit the shapes using the other buttons.

Note: We are happy to extend our API on request, if you need additional features not currently supported. Please get in touch so we can discuss your requirements.

Clustering markers

When adding your own markers to one of our plugins, you can chose to cluster the markers; meaning that a group of markers, which are close to each other, appear as a single icon when zoomed out. When you zoom in the cluster opens up and the icons appear individually. This reduces clutter on the map.

You can see clustering in action here.

Note: We are happy to extend our API on request, if you need additional features not currently supported. Please get in touch so we can discuss your requirements.

Ask users which schools to show

You can have users presented with a prompt asking them which type of schools they are interested in (i.e. nurseries, primary, secondary etc.), as below.


Property Hive add-on

If your website uses Property Hive, please be aware that there is a Property Hive add-on for Locrating. This allows you to very quickly and easily add Locrating maps via Property Hive configuration and shortcodes. Not all Locrating features are supported however, so more advanced users may still want to build their own implementation of Locrating.


Going live

When you are ready to go live with our plugin on your public site, you need to ensure you have a valid subscription, otherwise you will see an error message saying 'no subscription found'. If you haven't already please get in touch.

Warning: You need to have a business subscription with us in order to be able to use our plugins on your website. Business subscriptions are different from membership to our public website for individuals and cannot be purchased online. Please get in touch for more details.

Support

We're always here to help, please feel free to contact us with any issues, comments or suggestions.