Let's Get Building!

Our plugins can be installed onto any website within minutes!

   The team at Starberry absolutely love the Locrating Schools Module ... This is great product that offers a wealth of information ... makes the websites we build so much more informative ... the knowledge, expertise & friendliness of the team at Locrating makes working with them a fantastic experience   
Navin Mahendran, Chief Operating Officer, Starberry Ltd

Get Started

Three easy steps

Installing our plugins is super quick and easy, with just three easy steps, that can be completed in minutes.

Hopefully these instructions are suitably clear, however if something is either not covered, or unclear in this documentation, please feel free to get in touch. We're more than happy to assist getting you up and running.

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

Warning: You need to have a business subscription with us in order to be able to use our plugins on your website. Please get in touch for more details.

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>
             

The defer attribute means the library is not loaded until after your page has fully loaded; so your site remains as responsive as it was previously. However, as the file is just 4kb in size, performance is never going to be an issue anyway.

Warning: This library primarily constructs links to pages on our webservers. Do not attempt to reverse engineer this file and then use the links directly in your website; doing so breaks our Terms and Conditions and can result in us suspending your service. The file is there for a reason; it enables us to automatically provide future enhancements and prevent service outages, without the need for any changes to your website. Links you reverse engineer now will likely not work in the future.

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; border:1px solid #CCCCCC;"></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 centered 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.

Warning: You should avoid loading our plugin silently in the background, e.g. using the <body> onload to populate a <div> which is on a tab that is initially hidden and that users can optionally switch to, as this causes a plugin load in the background, which possibly no user ever looks at. This will both unnecessary load our servers and slow down your website. In this case, you should populate the <body> using the Tab's onclick event, or similar, so it is only loaded if the users has actively viewed it.
<!-- Load Locrating All-in-one Plugin -->
<body onload="try{loadLocratingPlugin({id:'map', lat: 51.456913, lng : -0.073099, type:'all'});}catch (err) {};"></body >
             

The try-catch block is a safety net in case our library could not be loaded, e.g. in the unlikely event of an outage. It prevents any errors being thrown on your site.

The coordinates and plugin type are mandatory parameters as described below.


Mandatory parameters

When calling loadLocratingPlugin, the following parameters are mandatory.

Parameter Valid values Default Description
lat The property Latitude Sets the centre of the map
lng The property Longitude Sets the centre of the map
type 'all' (All-in-one plugin)
'schools' (Schools map)
'transport' (Transport map)
'localinfo' (Amenities map)
'soldprices' (Sold prices)
'schoolslist' (Schools list)
'stationslist' (Stations list)
'schools' Sets the plugin type

There are also many optional parameters that can be used to configure our plugins, these are discussed for each plugin below.


Schools map

Our schools map plugin is a map displaying all the schools and nurseries around a property you are marketing. It supports the following optional configuration:

Parameter Valid values Default Description
icon The url of an image file, such as a .PNG or .JPG file The property icon displayed on the map
Note: You can have no property icon, e.g. for an area guide, by setting this property to '.' as here
mapstyle 'light'
'voyager'
'dark'
'satellite'
light Sets the style of the map
zoom Number 14 The map zoom level. The higher the zoom level, the more zoomed-in the map appears. At a zoom level of 15 you can see street names, at 14 not all street names are visible. Upon load, the map will automatically zoom out until at least one school is in view. The minimum zoom level that can be set is 11. Below this the maps will automatically adjust back to 11.
Warning: We recommend you do not change the zoom level, as the plugin automatically adjusts the zoom level to ensure schools are visible, however, if you have a map as an area guide, you might wish to zoom out a little to show a wider area by default.

The following shows a schools map with a custom icon and map style:

<!-- Load Locrating Schools Map -->
<body onload="try{loadLocratingPlugin({id:'customIcon', lat: 51.456913, lng : -0.073099, mapstyle:'voyager', icon:'https://www.locrating.com/html5/assets/images/marker-icon2.png'});}catch (err) {};"></body >
            

Amenities/local information map

Our amenities map plugin is a map showing almost half a million points of interest across the UK, including supermarkets, pubs, bars, cafes, restaurants, parks, gardens, playgrounds, swimming pools, sport centres, museums, galleries and more.

It supports all the same configuration as the school map and additionally you can control which categories are turned on or off by default:

Parameter Valid values Default Description
showshopping 'true', 'false', 'only' 'true' Determines if the Shopping category is on/off by default or the only category shown (setting 'only' turns off all the other categories).

This category includes: Supermarket, Marketplace.

Examples:
'showshopping':'false'
'showshopping':'only'
showattractions 'true', 'false', 'only' 'true' Determines if the Attractions category is on/off by default or the only category shown (setting 'only' turns off all the other categories).

This category includes: Beach Resort, Attraction, Aquarium, Arts Centre, Gallery, Museum, Theme Park, Viewpoint, Nature Reserve, Planetarium, Zoo.

Examples:
'showattractions':'false'
'showattractions':'only'
showleisure 'true', 'false', 'only' 'true' Determines if the Leisure Activities category is on/off by default or the only category shown (setting 'only' turns off all the other categories).

This category includes: Bowling Alley, Fitness Centre, Cinema, Theatre, Leisure Centre, Gym, Garden, Golf Course, Ice Rink, Miniature Golf, Park, Playground, Sports Centre, Stadium, Swimming Area, Swimming Pool, Water Park.

Examples:
'showleisure':'false'
'showleisure':'only'
showamenities 'true', 'false', 'only' 'true' Determines if the Amenities category is on/off by default or the only category shown (setting 'only' turns off all the other categories).

This category includes: Library, Charging Station, Ferry Terminal, Place Of Worship, Marina, Police.

Examples:
'showamenities':'false'
'showamenities':'only'
showfoodanddrink 'true', 'false', 'only' 'true' Determines if the Food and Drink category is on/off by default or the only category shown (setting 'only' turns off all the other categories).

This category includes: Pub, Bar, Fast Food, Ice Cream, Cafe, Food Court, Restaurant.

Examples:
'showfoodanddrink':'false'
'showfoodanddrink':'only'
showhealthcare 'true', 'false', 'only' 'true' Determines if the Healthcare category is on/off by default or the only category shown (setting 'only' turns off all the other categories).

This category includes: Dentist, Doctors, Clinic, Hospital.

Examples:
'showhealthcare':'false'
'showhealthcare':'only'

The following shows an amenities map with only food and drink displayed by default:

<!-- Load Locrating Amenities Map -->
<body onload="try{loadLocratingPlugin({id:'foodAndDrinkOnly', lat: 51.456913, lng : -0.073099, type:'localinfo, 'showfoodanddrink:'only'});}catch (err) {};"></body >
             

Transport map

Our transport map plugin is a plain vanilla map, showing just the property and local transport. Ideal as the main map on a property details page, it shows thousands of railway stations and other forms of public transport; including underground stations, tram stops, metro and light railway stations across the UK. It supports all the same configuration as the school map.

The following shows a transport map with the default options:

<!-- Load Locrating Transport Map -->
<body onload="try{loadLocratingPlugin({id:'transport', lat: 51.456913, lng : -0.073099, type:'transport'});}catch (err) {};"></body >
             

Stations list

Our stations list plugin contains the same transport options as shown in our transport map, but in list form, with the network name and distance. It will display up to 10 local stations, the taller the control, the more it will display.

We have deliberately excluded a title from this plugin, this is so you can both chose your own description text but also the styling of it, so it is consistent with the rest of your page. A suitable title might be something like LOCAL STATIONS.

The background colour will be inherited from the <div> parent. The following configuration is supported.

Parameter Valid values Default Description
maxstations Number 10 Maximum number of stations to display
fontfamily Any one of the hundreds of fonts made available by Google. You can browse these fonts at https://fonts.google.com/. 'Poppins' List font
Note: Replace spaces in the Google font name with +, e.g. fontfamily:'Amatic+SC'
Note: This parameter is case sensitive. You must match the same capitalisation that Google uses and the font must have a path following the standard Google format, e.g. for 'Roboto' https://fonts.googleapis.com/css2?family=Roboto.
fontsize Number 15 Title font size (px), all other text elements are sized relatively to this
titlecolor Colour, e.g. 'Black' or '#777777' '#777777' Colour of title text
subtitlecolor Colour, e.g. 'Black' or '#777777' 'darkgray' Colour of sub title text
distancecolor Colour, e.g. 'Black' or '#777777' '#c1c1c1' Colour of distance text
separatorcolor Colour, e.g. 'Black' or '#777777' 'whitesmoke' Colour of separator bar

The following shows a standard and customised stations list:

<!-- Load Locrating Stations List -->
<body onload="try{loadLocratingPlugin({id:'stationslist1', lat:51.456913, lng:-0.073099, type: 'stationslist'});}catch (err) {};"></body >
            
<!-- Load Locrating Stations List with Custom Font-->
<body onload="try{loadLocratingPlugin({id:'stationslist2', lat:51.456913, lng:-0.073099, type: 'stationslist', fontfamily:'Rambla', fontsize:18, titlecolor:'white', subtitlecolor:'whitesmoke', distancecolor:'gainsboro', separatorcolor:'#778e98'});}catch (err) {};"></body >
            
                                

Schools list

Our schools list plugin will display up to 10 local schools in list form, with inspection rating and distance. The taller the control, the more it will display.

We have deliberately excluded a title from this plugin, this is so you can both chose your own description text but also the styling of it, so it is consistent with the rest of your page. A suitable title might be something like LOCAL SCHOOLS.

The background colour will be inherited from the <div> parent. The schools list supports the same configuration as the stations list and additionally:

Parameter Valid values Default Description
maxschools Number 10 Maximum number of schools to display
highlightcolor Colour, e.g. 'Black' or '#777777' 'white' Colour of active primary/secondary school toggle button
highlightbackcolor Colour, e.g. 'Black' or '#777777' 'cornflowerblue' Background colour of active primary/secondary school toggle button

The following shows a standard schools list:

<!-- Load Locrating Schools List -->
<body onload="try{loadLocratingPlugin({id:'schoolslist', lat: 51.456913, lng : -0.073099, type:'schoolslist'});}catch (err) {};"></body >
             

Sold prices chart

Our sold prices plugin shows historical sold price data taken from HM Land Registry. It support the following configuration:

Parameter Valid values Default Description
compareto An area name or text, e.g. 'London' or 'Select an Area to Compare' Preselects an area to compare prices with and enables the area comparison drop down
Note: This parameter is case sensitive. You must match the area name to a value in the areas dropdown. If no match can be found the text is displayed with the dropdown enabled so users can select an area from the list.
fontfamily Any one of the hundreds of fonts made available by Google. You can browse these fonts at https://fonts.google.com/. 'Poppins' Chart and title font
Note: Replace spaces in the Google font name with +, e.g. fontfamily:'Amatic+SC'
Note: This parameter is case sensitive. You must match the same capitalisation that Google uses and the font must have a path following the standard Google format, e.g. for 'Roboto' https://fonts.googleapis.com/css2?family=Roboto.
fontsize Number 14 Title font size (px)
bordercolor Colour, e.g. 'Black' or '#777777' 'transparent' Colour of border displayed around sections of plugin
borderradius Number 0 Radius of border corner in pixels, i.e. 2 = 2px
fontcolor Colour, e.g. 'Black' or '#777777' '#777777' Font colour
axisfontsize Number 11 Chart x and y axis font size (px)
years Number (max 10) 10 Number of years worth of data to include in chart
showmap 'true' or 'false' 'false' Whether to include a map next to the chart showing the area the prices relate to.
Note: When showing a map, you can also pass the same parameters as the schools map supports, to control the styling of the map in this plugin, e.g. mapstyle etc.

The following shows the default sold prices chart, with the map turned on and the compare to text set:

<!-- Load Locrating Sold Prices Chart -->
<body onload="try{loadLocratingPlugin({id: 'areaStats', lat: 51.456913, lng : -0.073099, type:'areastats', showmap: 'true', compareto: 'Select an Area to Compare'});}catch (err) {};"></body >
             

Adding a schools report link

Note: You do not need to implement a separate link for the local schools report, as it is by default built into our schools map, as a button at the bottom left. In almost all cases this should be sufficient. However, if you do want to implement a separate button/link for the report, e.g. on a property details page, then follow the instructions below.

To create a link that pops up a schools report, create a link as below. Of course, you don't have to use a link, you could use any control that supports onclick such as an image or button.

<!-- Link that opens new window showing Locrating local schools report -->
<a href="https://www.locrating.com" onclick="try{return openLocratingWindow({lat: 51.456913, lng : -0.073099, type:'schoolsreport'});}catch (err) {}">Schools Map</a>
             

The try-catch block is a safety net in case our library could not be loaded, e.g. in the unlikely event of an outage. It prevents any errors being thrown on your site.


New!All-in-one plugin

Our all-in-one plugin combines all our plugins into one easy to use window. As it contains all the other plugins and therefore supports all the configuration they do, which is passed through to each contained plugin. It also supports the following additional configuration:

Note: All the settings below can be set for your site by us centrally on our servers. If you wish, we will happily set them up for you and modify them over time, as necessary.
Parameter Valid values Default Description
starttab 'location', 'schools', 'amenities' or 'soldprices' 'location' The tab displayed first by default
showsoldprices 'true' or 'false' 'true' Determines if the sold prices option is available, sold prices are only availabel for England and Wales, so for areas not covered, e.g. Scoland, you may wish to hide this option
menuallcaps 'true' or 'false' 'false' Sets the main menu text to be all uppercase or all lowercase
menucolor Colour, e.g. 'Black' or '#777777' Colour of menu text
menufontsize Number 13 Menu font size (px)
menuletterspacing String, e.g. 0.9px Unset Menu letter spacing
menufontfamily Any one of the hundreds of fonts made available by Google. You can browse these fonts at https://fonts.google.com/. 'Poppins' List font
Note: Replace spaces in the Google font name with +, e.g. fontfamily:'Amatic+SC'
Note: This parameter is case sensitive. You must match the same capitalisation that Google uses and the font must have a path following the standard Google format, e.g. for 'Roboto' https://fonts.googleapis.com/css2?family=Roboto.
menuselectcolor Colour, e.g. 'Black' or '#777777' Colour of currently selected plugin menu text
menubackcolor Colour, e.g. 'Black' or '#777777' Colour of menu background
menuselectbackcolor Colour, e.g. 'Black' or '#777777' Colour of currently selected plugin menu background

The following shows a customised all-in-one plugin:

<!-- Load Locrating All-in-one Plugin -->
<body onload="try{loadLocratingPlugin({id:'completeplugin',lat: 51.456913, lng : -0.073099, type:'all', mapstyle:'voyager', menucolor: '#401663', menubackcolor: '#e6e7e8', menuselectcolor: '#feeff8', menuselectbackcolor: '#ec008c',  menuallcaps: 'true', icon: 'https://www.locrating.com/html5/assets/images/house_icon2.png'});}catch (err) {};"></body >
            

New!Adding your own markers

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.

Functions exist in our library to add and remove map markers. Each requires the id of the <div> that contains the map and details of the marker to add or remove. Markers can only be added once the map has loaded, a callback method should be passed to the map during load, which is called once the map has successfully loaded.

The following functions can be used with all our pluigns (except the all-in-one plugin):

Function Description Usage
addLocratingMapMarker(id, marker) Adds a single marker to the map See examples below
addLocratingMapMarkers(id, markerArray) Adds an array of markers to the map See example here here
removeLocratingMapMarker(id, markerId) Removes map marker from map See examples below
openLocratingMarker(id, markerId) Open the map marker popup window See examples below
removeAllLocratingMapMarkers(id) Open the map marker popup window See examples below
showLocratingMapLoading(id) Shows the spinning 'loading' on the map See example here here
hideLocratingMapLoading(id) Hides the spinning 'loading' on the map See example here here
showErrorMessage(id) Shows an error message in the map See example here here

The Javascript below shows an example of adding a marker to a transport map, once the map has been loaded. The commented lines show how you would remove an individual marker using its id or all markers.

<!-- Load Locrating map and add custom marker after its loaded -->
loadLocratingPlugin({
    id: 'mapWithMarkers',
    lat: 51.456913,
    lng: -0.073099,
    icon: '.',
    type: 'transport',
    onLoaded: function() {

        addLocratingMapMarker('mapWithMarkers',
        {
            id: 'marker1', 
            lat: 51.456913, 
            lng: -0.079099,
            html: '<div style="width: 350px;"><table style="width:100%;text-align:left"><tbody><tr style="padding: 2px;"><td style="width: 30%;padding: 4px;"><img src="../assets/images/features/propety_picture.jpg" style="width:165px;padding: 2px;border-radius: 5px;box-shadow: 0 3px 14px rgba(0,0,0,0.4);"></td><td style="width: 70%;padding: 1px 5px;"><div style="padding: 0px 5px;"><b style="font-size: 1.28em;font-weight: 700;color: #3b83c0">£1,175,000</b><div style="max-width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;">The Ridgeway, Tonbridge TN10</div><div style="font-size:0.85rem;max-width: 150px;padding-top:2px;overflow: hidden;text-overflow: ellipsis;">Detached house<br>5 Bedrooms<br>3 Bathrooms<br>5 Receptions<br><a style="font-weight:bold" href="#">View Details</a></div></div></td></tr></tbody></table></div>',
            icon: '../assets/images/house_icon2.png',
            iconHeight: 38,
            iconWidth: 40
    
            // You can use the onClick event to react to a marker click
            //,onClick: function(marker) { alert( marker.id + ' clicked') }
        });
    
        addLocratingMapMarker('mapWithMarkers',
        {
            id: 'marker2',
            lat: 51.456913,
            lng: -0.199099,
            icon: '../assets/images/house_icon.png',
            iconHeight: 38,
            iconWidth: 40,
            // Don't set html here, instead load dynamically below
            onClick: function (marker)
            {
                // To dynamically set marker popup html, return the html in this function
                return '<div style="width: 350px;"><table style="width:100%;text-align:left"><tbody><tr style="padding: 2px;"><td style="width: 30%;padding: 4px;"><img src="../assets/images/features/propety_picture.jpg" style="width:165px;padding: 2px;border-radius: 5px;box-shadow: 0 3px 14px rgba(0,0,0,0.4);"></td><td style="width: 70%;padding: 1px 5px;"><div style="padding: 0px 5px;"><b style="font-size: 1.28em;font-weight: 700;color: #3b83c0">£1,175,000</b><div style="max-width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;">The Ridgeway, Tonbridge TN10</div><div style="font-size:0.85rem;max-width: 150px;padding-top:2px;overflow: hidden;text-overflow: ellipsis;">Detached house<br>5 Bedrooms<br>3 Bathrooms<br>5 Receptions<br><a style="font-weight:bold" href="#">View Details</a></div></div></td></tr></tbody></table></div>';
    
                // To asynchronously open marker and set html don't return above (just delete the return statement) and instead call the function below
                //openLocratingMarker('mapWithMarkers',
                //    {
                //        id: 'marker1',
                //        html: '<div style="width: 350px;"><table style="width:100%;text-align:left"><tbody><tr style="padding: 2px;"><td style="width: 30%;padding: 4px;"><img src="../assets/images/features/propety_picture.jpg" style="width:165px;padding: 2px;border-radius: 5px;box-shadow: 0 3px 14px rgba(0,0,0,0.4);"></td><td style="width: 70%;padding: 1px 5px;"><div style="padding: 0px 5px;"><b style="font-size: 1.28em;font-weight: 700;color: #3b83c0">£1,175,000</b><div style="max-width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;">The Ridgeway, Tonbridge TN10</div><div style="font-size:0.85rem;max-width: 150px;padding-top:2px;overflow: hidden;text-overflow: ellipsis;">Detached house<br>5 Bedrooms<br>3 Bathrooms<br>5 Receptions<br><a style="font-weight:bold" href="#">View Details</a></div></div></td></tr></tbody></table></div>'
                //    });   
            }
        });

        centerLocratingMapUsingMarkers('mapWithMarkers');

        //removeLocratingMapMarker('mapWithMarkers', {id: 'marker1'}); 
        //removeAllLocratingMapMarkers('mapWithMarkers');

    }
});
             
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.

New!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.

Technically this works in a similar fashion to adding your own markers. Firstly, when loading the plugin, you must set canDraw to 'yes', this will cause the Draw-a-Search controls to display on the map, under the zoom controls in the top left corner. Then you need to pass a callback function to onDraw. This will be called every time a user draws a shape on the map. In this function, return the markers you would like to be added to the map. The plugin will automatically only show markers that are in drawn shapes, but you can check in this function the bounds of the shape drawn and restrict the markers returned yourself if you wish.

The following functions can be used with all our pluigns (except the all-in-one plugin):

Function Description Usage
enableLocratingDrawASearch(id) Enables the Draw-a-Search controls See example here here
disableLocratingDrawASearch(id) Disable the Draw-a-Search controls See example here here

You can try this feature out in the map below the code, there is a property in the centre of the map. It will appear when you draw a shape around that area. You can also edit shapes and delete them. Markers will be added and removed accordingly.

<!-- Load Locrating map with Draw-a-Search -->
loadLocratingPlugin({
    id: 'drawASearch',
    lat: 51.456913,
    lng: -0.079099,
    icon: '.',
    type: 'transport',
    canDraw: 'yes',
    onDraw: function (e) {

        // Use the below to control which of your markers are displayed on the map, markers will only be shown on the map if they are within the drawn area
        // if you don't have your own logic to check which markers are in the drawn area, that's fine, just return the markers that are within 
        // the bounds (or all your markers) and the plugin will do the rest.
        var bounds = e.bounds;
        var latlngs = e.latlngs;

        var marker1 = {
            id: 'marker1',
            lat: 51.456913,
            lng: -0.079099,
            html: '<div style="width: 350px;"><table style="width:100%;text-align:left"><tbody><tr style="padding: 2px;"><td style="width: 30%;padding: 4px;"><img src="../assets/images/features/propety_picture.jpg" style="width:165px;padding: 2px;border-radius: 5px;box-shadow: 0 3px 14px rgba(0,0,0,0.4);"></td><td style="width: 70%;padding: 1px 5px;"><div style="padding: 0px 5px;"><b style="font-size: 1.28em;font-weight: 700;color: #3b83c0">£1,175,000</b><div style="max-width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;">The Ridgeway, Tonbridge TN10</div><div style="font-size:0.85rem;max-width: 150px;padding-top:2px;overflow: hidden;text-overflow: ellipsis;">Detached house<br>5 Bedrooms<br>3 Bathrooms<br>5 Receptions<br><a style="font-weight:bold" href="#">View Details</a></div></div></td></tr></tbody></table></div>',
            icon: '../assets/images/house_icon2.png',
            iconHeight: 38,
            iconWidth: 40
            // You can use the onClick event to react to a marker click
            //,onClick: function(marker) { alert( marker.id + ' clicked') }
        };

        var marker2 = {
            id: 'marker2',
            lat: 51.456913,
            lng: -0.199099,
            icon: '../assets/images/house_icon.png',
            iconHeight: 38,
            iconWidth: 40,
            // Don't set html here, instead load dynamically below
            onClick: function (marker) {
                // To dynamically set marker popup html, return the html in this function
                return '<div style="width: 350px;"><table style="width:100%;text-align:left"><tbody><tr style="padding: 2px;"><td style="width: 30%;padding: 4px;"><img src="../assets/images/features/propety_picture.jpg" style="width:165px;padding: 2px;border-radius: 5px;box-shadow: 0 3px 14px rgba(0,0,0,0.4);"></td><td style="width: 70%;padding: 1px 5px;"><div style="padding: 0px 5px;"><b style="font-size: 1.28em;font-weight: 700;color: #3b83c0">£1,175,000</b><div style="max-width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;">The Ridgeway, Tonbridge TN10</div><div style="font-size:0.85rem;max-width: 150px;padding-top:2px;overflow: hidden;text-overflow: ellipsis;">Detached house<br>5 Bedrooms<br>3 Bathrooms<br>5 Receptions<br><a style="font-weight:bold" href="#">View Details</a></div></div></td></tr></tbody></table></div>';
    
                // To asynchronously open marker and set html don't return above (just delete the return statement) and instead call the function below
                //openLocratingMarker('mapWithMarkers',
                //    {
                //        id: 'marker1',
                //        html: '<div style="width: 350px;"><table style="width:100%;text-align:left"><tbody><tr style="padding: 2px;"><td style="width: 30%;padding: 4px;"><img src="../assets/images/features/propety_picture.jpg" style="width:165px;padding: 2px;border-radius: 5px;box-shadow: 0 3px 14px rgba(0,0,0,0.4);"></td><td style="width: 70%;padding: 1px 5px;"><div style="padding: 0px 5px;"><b style="font-size: 1.28em;font-weight: 700;color: #3b83c0">£1,175,000</b><div style="max-width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;">The Ridgeway, Tonbridge TN10</div><div style="font-size:0.85rem;max-width: 150px;padding-top:2px;overflow: hidden;text-overflow: ellipsis;">Detached house<br>5 Bedrooms<br>3 Bathrooms<br>5 Receptions<br><a style="font-weight:bold" href="#">View Details</a></div></div></td></tr></tbody></table></div>'
                //    });
            }
        };

        return [marker1, marker2];
    
        // Or for asynchronous responses, don't use a return value and instead call as below
        //addLocratingMapMarkersToDrawnArea('drawASearch', [marker1, marker2]);

    }
});
             
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.

New!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.

To cluster your markers, simply pass true to the cluster parameter of addLocratingMapMarkers or addLocratingMapMarkersToDrawnArea. Clustering can be used with all our pluigns (except the all-in-one plugin) and can be used in conjunction with Draw-a-Search.

You can see clustering in action here and in this code code.

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

If you would like users to be presented with a prompt asking them which type of schools they are interested in (i.e. nurseries, primary, secondary etc.) then please get in touch, as this is a setting we control on our side.

Below is a working example of an embedded map, with a school type prompt:


Showing your Zoopla properties

The best way to add your properties to our maps, is by adding your own custom markers, as this allows you to integrate everything fully into your site, such as adding links to the property detail pages on your site in map marker popups.

However, if you list your properties for sale or rent with Zoopla, we can obtain their details from Zoopla directly and display them on the map. Please get in touch for further instructions on how to do this and what configuration is available.

Below is a working example of an embedded map, loading properties (in this case for Pedder), directly from Zoopla:


Advanced Configuration

These instructions detail the most common configuration that clients are likely to want to use, however our plugins support much more. Below is a list of some of these additional options available. Please get in touch to discuss more advanced configuration of our plugins on your website.

  • Showing or hiding map controls.
  • Changing fonts or icons.
  • Setting school filters, such as inspection rating, type, gender etc.
  • Searching without lat/lng coordinates.
  • Setting property filters.
  • Turning catchment indicators on/off.


Going live

When you are ready to go live with out 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.


Support

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