查找视图中的标记（不在集群内）
Find markers in view (that aren't within a cluster)
我在地图上有大约 2,000 个标记。
当用户平移/缩放地图时，我想找到视图中的标记，然后在 table.
中显示这些位置
我正在遍历标记，然后使用下面的代码查看标记是否在地图的边界内。
if( map.getBounds().contains( markers[i].getPosition() ) )
根据我的理解，这些标记始终可见，即使它们在一个簇中。我需要检查标记是否真的可见。
我在这张图片中的三个蓝色标记之后，忽略了其余的集群。
http://snag.gy/aCUBR.jpg
完整代码：
var geocoder = null;
var markers = [];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function initialize()
{
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15, //change back to 5
center: new google.maps.LatLng(53.3077361,-1.4317984),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
/* Markers within bounds */
google.maps.event.addListener(map, 'idle', function() {
$('.results tbody').empty();
for (var i=0; i<markers.length; i++)
{
if( map.getBounds().contains( markers[i].getPosition() ) )
{
var stockist = markers[i].key;
$('.results tbody').append('' +
'<tr>' +
'<td><span class="red">' + stockist.name + '</span><br>' + stockist.address_1 + '</td>' +
'<td>' + stockist.postcode + '</td>' +
'<td>xkm</td>' +
'</tr>');
}
}
});
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for( var key in data.stockists )
{
var latLng = new google.maps.LatLng(data.stockists[key].latitude, data.stockists[key].longitude);
var marker = new google.maps.Marker({
position: latLng,
draggable: false,
icon: markerImage,
key: data.stockists[key]
});
markers.push(marker);
}
var zoom = zoom === -1 ? null : zoom;
var size = size === -1 ? null : size;
var style = style === -1 ? null: style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: 11,
gridSize: 100,
styles: styles[style]
});
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
代码的工作示例：
http://46.101.40.40/map/map.html
正如您将从中看到的那样，它显示了 12 个位置（不确定为什么不是 13...），我只需要 2 个蓝色标记的位置。
要确定标记是否未聚集并且在地图上是否可见检查：
- 如果标记可见
- 如果标记的地图 属性 不为空
- 如果标记在地图视口内
（注意此代码假定 markerclustererplus）
google.maps.event.addListener(markerCluster,'clusteringend',function() {
var side_bar_html = "";
for (var i=0; i<gmarkers.length;i++) {
if (gmarkers[i].getVisible() && (gmarkers[i].getMap() != null) && map.getBounds().contains(gmarkers[i].getPosition())){
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].getTitle() + '<\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = side_bar_html;
});
代码片段：
var geocoder = null;
var markers = [];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11, //change back to 5
center: new google.maps.LatLng(53.3077361, -1.4317984),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
/* Markers within bounds */
google.maps.event.addListener(map, 'idle', function() {
$('.results tbody').empty();
for (var i = 0; i < markers.length; i++) {
if (markers[i].getVisible() && (markers[i].getMap() != null) && map.getBounds().contains(markers[i].getPosition())) {
var stockist = markers[i].key;
$('.results tbody').append('' +
'<tr>' +
'<td><span class="red">' + stockist.name + '</span><br>' + stockist.address_1 + '</td>' +
'<td>' + stockist.postcode + '</td>' +
'<td>xkm</td>' +
'</tr>');
}
}
});
/* Geocode address on submit */
document.getElementById('search-button').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var key in data.stockists) {
var latLng = new google.maps.LatLng(data.stockists[key].latitude, data.stockists[key].longitude);
var marker = new google.maps.Marker({
position: latLng,
title: data.stockists[key].id,
draggable: false,
icon: markerImage,
key: data.stockists[key]
});
markers.push(marker);
}
var zoom = zoom === -1 ? null : zoom;
var size = size === -1 ? null : size;
var style = style === -1 ? null : style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: 11,
gridSize: 100
});
}
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('search-value').value;
geocoder.geocode({
'address': address
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
resultsMap.panTo(results[0].geometry.location);
resultsMap.setZoom(12);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
"stockists": [{
"id": "557",
"retailer_id": "8162",
"name": "Alfred Dunham & Sons Limited",
"address_1": "56 Snape Hill Lane",
"address_2": "Dronfield",
"address_3": "Sheffield",
"address_4": "",
"postcode": "S18 2GP",
"telephone": "01246 290205",
"latitude": "53.3058795807",
"longitude": "-1.46872179885"
}, {
"id": "643",
"retailer_id": "5921",
"name": "City Electrical Factors",
"address_1": "120 Liverpool Street",
"address_2": "Attercliffe",
"address_3": "Sheffield",
"address_4": "",
"postcode": "S9 2PU",
"telephone": "0114 2447181",
"latitude": "53.3991836837",
"longitude": "-1.42996239972"
}, {
"id": "1380",
"retailer_id": "1047",
"name": "Mitchells of Horley",
"address_1": "1-9 Station Road",
"address_2": "Horley",
"address_3": "Surrey",
"address_4": "",
"postcode": "RH6 9HW",
"telephone": "01293 820229",
"latitude": "51.1735617204",
"longitude": "-0.160334794573"
}, {
"id": "1381",
"retailer_id": "8045",
"name": "Lawsons Crawley",
"address_1": "Unit 4",
"address_2": "Telford Place",
"address_3": "Crawley",
"address_4": "",
"postcode": "RH10 1SY",
"telephone": "01293 535054",
"latitude": "51.111860316",
"longitude": "-0.182787540235"
}, {
"id": "1382",
"retailer_id": "8163",
"name": "Shaws Ironmongers Limited",
"address_1": "112\/118 Duchess Road",
"address_2": "Sheffield",
"address_3": "South Yorkshire",
"address_4": "",
"postcode": "S2 4BL",
"telephone": "01142 724289",
"latitude": "53.3714802748",
"longitude": "-1.46490033489"
}, {
"id": "1383",
"retailer_id": "8627",
"name": "M.K.M. Building Supplies Limited",
"address_1": "110 Rutland Road",
"address_2": "Sheffield",
"address_3": "South Yorkshire",
"address_4": "",
"postcode": "S3 9PJ",
"telephone": "0114 2709140",
"latitude": "53.393997293",
"longitude": "-1.47514511335"
}, {
"id": "1384",
"retailer_id": "8628",
"name": "M.K.M. Building Supplies Limited",
"address_1": "201 Woodbourn Road",
"address_2": "Sheffield",
"address_3": "South Yorkshire",
"address_4": "",
"postcode": "S9 3LR",
"telephone": "0114 2894210",
"latitude": "53.3848381766",
"longitude": "-1.43767094034"
}, {
"id": "1385",
"retailer_id": "8173",
"name": "Turner Hire & Sales Limited",
"address_1": "426 - 432 London Road",
"address_2": "Sheffield",
"address_3": "",
"address_4": "",
"postcode": "S2 4ND",
"telephone": "0114 2581682",
"latitude": "53.364329725",
"longitude": "-1.47400630126"
}, {
"id": "1386",
"retailer_id": "5920",
"name": "City Electrical Factors",
"address_1": "18 Hillfoot Road",
"address_2": "Sheffield",
"address_3": "South Yorkshire",
"address_4": "",
"postcode": "S3 8AA",
"telephone": "0114 2755680",
"latitude": "53.3949418548",
"longitude": "-1.48566055099"
}, {
"id": "1387",
"retailer_id": "6931",
"name": "City Electrical Factors",
"address_1": "Unit 4 Old Forge Business Park",
"address_2": "Sark Road",
"address_3": "Sheffield",
"address_4": "",
"postcode": "S2 4HG",
"telephone": "0114 2585555",
"latitude": "53.3634242859",
"longitude": "-1.47251473647"
}, {
"id": "1388",
"retailer_id": "1421",
"name": "Alltools Limited",
"address_1": "Woodbourn House",
"address_2": "119-139 Staniforth Road",
"address_3": "Sheffield",
"address_4": "",
"postcode": "S9 3HD",
"telephone": "0114 224 3443",
"latitude": "53.3902025569",
"longitude": "-1.43158582647"
}, {
"id": "1389",
"retailer_id": "4471",
"name": "Pagets Builders Merchants LTD",
"address_1": "94 Broadfield Road",
"address_2": "Sheffield",
"address_3": "",
"address_4": "",
"postcode": "S8 0XL",
"telephone": "0114 292 3000",
"latitude": "53.3607476212",
"longitude": "-1.4770556"
}, {
"id": "1390",
"retailer_id": "4664",
"name": "Arnold Laver Timber World Limited",
"address_1": "Sheffield Central",
"address_2": "Little London Road",
"address_3": "Sheffield",
"address_4": "",
"postcode": "S8 0UH",
"telephone": "0114 255 7341",
"latitude": "53.3544819891",
"longitude": "-1.48314180348"
}, {
"id": "1391",
"retailer_id": "6366",
"name": "Hardcores Building & Paving",
"address_1": "Rawson Spring Road",
"address_2": "Hillsborough",
"address_3": "Sheffield",
"address_4": "South Yorkshire",
"postcode": "S6 1PD",
"telephone": "01142 310909",
"latitude": "53.4102791612",
"longitude": "-1.49901537862"
}, {
"id": "1392",
"retailer_id": "8130",
"name": "Timber Specialists",
"address_1": "Herries Road South",
"address_2": "Hillsborough",
"address_3": "Sheffield",
"address_4": "",
"postcode": "S6 1QS",
"telephone": "0114 2316600",
"latitude": "53.4111716609",
"longitude": "-1.49750046288"
}, {
"id": "1393",
"retailer_id": "8708",
"name": "Arnold Laver Timber World Limited",
"address_1": "Sheffield Mosborough",
"address_2": "Olympic Sawmillsad",
"address_3": "Oxclose Park Road North",
"address_4": "Sheffield",
"postcode": "S20 8GN",
"telephone": "0114 2764800",
"latitude": "53.3250344796",
"longitude": "-1.34387258212"
}, {
"id": "1394",
"retailer_id": "8459",
"name": "LBS Builders Merchants Limited",
"address_1": "Ferryboat Close",
"address_2": "Enterprise Park",
"address_3": "Swansea",
"address_4": "",
"postcode": "SA6 8QN",
"telephone": "01792 702703",
"latitude": "51.6569808054",
"longitude": "-3.91979196897"
}]
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<article class="stockists">
<div class="row">
<div class="col-md-9">
<div class="search-form">
<div class="row">
<div class="col-sm-9">
<input class="form-field" type="text" name="location" placeholder="Town, County or Postcode" id="search-value" value="SM14NG">
</div>
<div class="col-sm-3">
<button class="btn btn-orange btn-upper btn-find" type="submit" id="search-button">Find Stockist</button>
</div>
</div>
</div>
<div class="map" id="map" style="width: 500px; height: 500px;"></div>
<table class="results" width="100%">
<thead>
<tr>
<th>Stockist</th>
<th>Postcode</th>
<th>Distance</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</article>
我在地图上有大约 2,000 个标记。
当用户平移/缩放地图时，我想找到视图中的标记，然后在 table.
中显示这些位置我正在遍历标记，然后使用下面的代码查看标记是否在地图的边界内。
if( map.getBounds().contains( markers[i].getPosition() ) )
根据我的理解，这些标记始终可见，即使它们在一个簇中。我需要检查标记是否真的可见。
我在这张图片中的三个蓝色标记之后，忽略了其余的集群。 http://snag.gy/aCUBR.jpg
完整代码：
var geocoder = null;
var markers = [];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function initialize()
{
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15, //change back to 5
center: new google.maps.LatLng(53.3077361,-1.4317984),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
/* Markers within bounds */
google.maps.event.addListener(map, 'idle', function() {
$('.results tbody').empty();
for (var i=0; i<markers.length; i++)
{
if( map.getBounds().contains( markers[i].getPosition() ) )
{
var stockist = markers[i].key;
$('.results tbody').append('' +
'<tr>' +
'<td><span class="red">' + stockist.name + '</span><br>' + stockist.address_1 + '</td>' +
'<td>' + stockist.postcode + '</td>' +
'<td>xkm</td>' +
'</tr>');
}
}
});
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for( var key in data.stockists )
{
var latLng = new google.maps.LatLng(data.stockists[key].latitude, data.stockists[key].longitude);
var marker = new google.maps.Marker({
position: latLng,
draggable: false,
icon: markerImage,
key: data.stockists[key]
});
markers.push(marker);
}
var zoom = zoom === -1 ? null : zoom;
var size = size === -1 ? null : size;
var style = style === -1 ? null: style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: 11,
gridSize: 100,
styles: styles[style]
});
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
代码的工作示例： http://46.101.40.40/map/map.html
正如您将从中看到的那样，它显示了 12 个位置（不确定为什么不是 13...），我只需要 2 个蓝色标记的位置。
要确定标记是否未聚集并且在地图上是否可见检查：
- 如果标记可见
- 如果标记的地图 属性 不为空
- 如果标记在地图视口内
（注意此代码假定 markerclustererplus）
google.maps.event.addListener(markerCluster,'clusteringend',function() {
var side_bar_html = "";
for (var i=0; i<gmarkers.length;i++) {
if (gmarkers[i].getVisible() && (gmarkers[i].getMap() != null) && map.getBounds().contains(gmarkers[i].getPosition())){
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].getTitle() + '<\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = side_bar_html;
});
代码片段：
var geocoder = null;
var markers = [];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11, //change back to 5
center: new google.maps.LatLng(53.3077361, -1.4317984),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
/* Markers within bounds */
google.maps.event.addListener(map, 'idle', function() {
$('.results tbody').empty();
for (var i = 0; i < markers.length; i++) {
if (markers[i].getVisible() && (markers[i].getMap() != null) && map.getBounds().contains(markers[i].getPosition())) {
var stockist = markers[i].key;
$('.results tbody').append('' +
'<tr>' +
'<td><span class="red">' + stockist.name + '</span><br>' + stockist.address_1 + '</td>' +
'<td>' + stockist.postcode + '</td>' +
'<td>xkm</td>' +
'</tr>');
}
}
});
/* Geocode address on submit */
document.getElementById('search-button').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var key in data.stockists) {
var latLng = new google.maps.LatLng(data.stockists[key].latitude, data.stockists[key].longitude);
var marker = new google.maps.Marker({
position: latLng,
title: data.stockists[key].id,
draggable: false,
icon: markerImage,
key: data.stockists[key]
});
markers.push(marker);
}
var zoom = zoom === -1 ? null : zoom;
var size = size === -1 ? null : size;
var style = style === -1 ? null : style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: 11,
gridSize: 100
});
}
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('search-value').value;
geocoder.geocode({
'address': address
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
resultsMap.panTo(results[0].geometry.location);
resultsMap.setZoom(12);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
"stockists": [{
"id": "557",
"retailer_id": "8162",
"name": "Alfred Dunham & Sons Limited",
"address_1": "56 Snape Hill Lane",
"address_2": "Dronfield",
"address_3": "Sheffield",
"address_4": "",
"postcode": "S18 2GP",
"telephone": "01246 290205",
"latitude": "53.3058795807",
"longitude": "-1.46872179885"
}, {
"id": "643",
"retailer_id": "5921",
"name": "City Electrical Factors",
"address_1": "120 Liverpool Street",
"address_2": "Attercliffe",
"address_3": "Sheffield",
"address_4": "",
"postcode": "S9 2PU",
"telephone": "0114 2447181",
"latitude": "53.3991836837",
"longitude": "-1.42996239972"
}, {
"id": "1380",
"retailer_id": "1047",
"name": "Mitchells of Horley",
"address_1": "1-9 Station Road",
"address_2": "Horley",
"address_3": "Surrey",
"address_4": "",
"postcode": "RH6 9HW",
"telephone": "01293 820229",
"latitude": "51.1735617204",
"longitude": "-0.160334794573"
}, {
"id": "1381",
"retailer_id": "8045",
"name": "Lawsons Crawley",
"address_1": "Unit 4",
"address_2": "Telford Place",
"address_3": "Crawley",
"address_4": "",
"postcode": "RH10 1SY",
"telephone": "01293 535054",
"latitude": "51.111860316",
"longitude": "-0.182787540235"
}, {
"id": "1382",
"retailer_id": "8163",
"name": "Shaws Ironmongers Limited",
"address_1": "112\/118 Duchess Road",
"address_2": "Sheffield",
"address_3": "South Yorkshire",
"address_4": "",
"postcode": "S2 4BL",
"telephone": "01142 724289",
"latitude": "53.3714802748",
"longitude": "-1.46490033489"
}, {
"id": "1383",
"retailer_id": "8627",
"name": "M.K.M. Building Supplies Limited",
"address_1": "110 Rutland Road",
"address_2": "Sheffield",
"address_3": "South Yorkshire",
"address_4": "",
"postcode": "S3 9PJ",
"telephone": "0114 2709140",
"latitude": "53.393997293",
"longitude": "-1.47514511335"
}, {
"id": "1384",
"retailer_id": "8628",
"name": "M.K.M. Building Supplies Limited",
"address_1": "201 Woodbourn Road",
"address_2": "Sheffield",
"address_3": "South Yorkshire",
"address_4": "",
"postcode": "S9 3LR",
"telephone": "0114 2894210",
"latitude": "53.3848381766",
"longitude": "-1.43767094034"
}, {
"id": "1385",
"retailer_id": "8173",
"name": "Turner Hire & Sales Limited",
"address_1": "426 - 432 London Road",
"address_2": "Sheffield",
"address_3": "",
"address_4": "",
"postcode": "S2 4ND",
"telephone": "0114 2581682",
"latitude": "53.364329725",
"longitude": "-1.47400630126"
}, {
"id": "1386",
"retailer_id": "5920",
"name": "City Electrical Factors",
"address_1": "18 Hillfoot Road",
"address_2": "Sheffield",
"address_3": "South Yorkshire",
"address_4": "",
"postcode": "S3 8AA",
"telephone": "0114 2755680",
"latitude": "53.3949418548",
"longitude": "-1.48566055099"
}, {
"id": "1387",
"retailer_id": "6931",
"name": "City Electrical Factors",
"address_1": "Unit 4 Old Forge Business Park",
"address_2": "Sark Road",
"address_3": "Sheffield",
"address_4": "",
"postcode": "S2 4HG",
"telephone": "0114 2585555",
"latitude": "53.3634242859",
"longitude": "-1.47251473647"
}, {
"id": "1388",
"retailer_id": "1421",
"name": "Alltools Limited",
"address_1": "Woodbourn House",
"address_2": "119-139 Staniforth Road",
"address_3": "Sheffield",
"address_4": "",
"postcode": "S9 3HD",
"telephone": "0114 224 3443",
"latitude": "53.3902025569",
"longitude": "-1.43158582647"
}, {
"id": "1389",
"retailer_id": "4471",
"name": "Pagets Builders Merchants LTD",
"address_1": "94 Broadfield Road",
"address_2": "Sheffield",
"address_3": "",
"address_4": "",
"postcode": "S8 0XL",
"telephone": "0114 292 3000",
"latitude": "53.3607476212",
"longitude": "-1.4770556"
}, {
"id": "1390",
"retailer_id": "4664",
"name": "Arnold Laver Timber World Limited",
"address_1": "Sheffield Central",
"address_2": "Little London Road",
"address_3": "Sheffield",
"address_4": "",
"postcode": "S8 0UH",
"telephone": "0114 255 7341",
"latitude": "53.3544819891",
"longitude": "-1.48314180348"
}, {
"id": "1391",
"retailer_id": "6366",
"name": "Hardcores Building & Paving",
"address_1": "Rawson Spring Road",
"address_2": "Hillsborough",
"address_3": "Sheffield",
"address_4": "South Yorkshire",
"postcode": "S6 1PD",
"telephone": "01142 310909",
"latitude": "53.4102791612",
"longitude": "-1.49901537862"
}, {
"id": "1392",
"retailer_id": "8130",
"name": "Timber Specialists",
"address_1": "Herries Road South",
"address_2": "Hillsborough",
"address_3": "Sheffield",
"address_4": "",
"postcode": "S6 1QS",
"telephone": "0114 2316600",
"latitude": "53.4111716609",
"longitude": "-1.49750046288"
}, {
"id": "1393",
"retailer_id": "8708",
"name": "Arnold Laver Timber World Limited",
"address_1": "Sheffield Mosborough",
"address_2": "Olympic Sawmillsad",
"address_3": "Oxclose Park Road North",
"address_4": "Sheffield",
"postcode": "S20 8GN",
"telephone": "0114 2764800",
"latitude": "53.3250344796",
"longitude": "-1.34387258212"
}, {
"id": "1394",
"retailer_id": "8459",
"name": "LBS Builders Merchants Limited",
"address_1": "Ferryboat Close",
"address_2": "Enterprise Park",
"address_3": "Swansea",
"address_4": "",
"postcode": "SA6 8QN",
"telephone": "01792 702703",
"latitude": "51.6569808054",
"longitude": "-3.91979196897"
}]
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<article class="stockists">
<div class="row">
<div class="col-md-9">
<div class="search-form">
<div class="row">
<div class="col-sm-9">
<input class="form-field" type="text" name="location" placeholder="Town, County or Postcode" id="search-value" value="SM14NG">
</div>
<div class="col-sm-3">
<button class="btn btn-orange btn-upper btn-find" type="submit" id="search-button">Find Stockist</button>
</div>
</div>
</div>
<div class="map" id="map" style="width: 500px; height: 500px;"></div>
<table class="results" width="100%">
<thead>
<tr>
<th>Stockist</th>
<th>Postcode</th>
<th>Distance</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</article>