1
I implemented the Google Maps code on one site, and it displays custom markers for all addresses on the map, it’s okay so far, it has to customize my map to change the type of the marker if one marker is close to the other, or rather, a marker has a 2km radius, and if another marker is within the same radius, the marker(ores) is of another color, or displays the radius visually on the map.
The data is recovered from Mysql, from the fields "latitude" and "longitude" of the table of registration, I just wanted to change to a new marker those that are overlapping in the radius of 2km of each other.
The picture is like this:
All markers are a predominant color logo "Black", and would like to change the markers overlaid by another logo (URL).
The code is like this:
<style>
#map {
width: 100%;
height: 600px;
}
</style>
<div class="row">
<div class="col-md-12">
<div id="map"></div>
</div>
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></script>
<script type="text/javascript">
var locations = [
['Unidade Vila Osasco', -23.544559, -46.781034, 'Avenida Santo Antônio, 2761, Vila Osasco, São Paulo - SP, 06083-215'],
['Unidade Rebouças', -22.8904057, -43.5603237, 'Avenida Rebouças, 3657, Centro, Sumaré - SP, 13170-023'],
['Unidade Nutrition Bauru', -22.3370765, -49.0891827, 'Avenida Castelo Branco, 7-15, Vila Independência, Bauru - SP, 17052-000'],
['Unidade Pitangueiras', -23.2022764, -46.8836439, 'Rua Pitangueiras, 790, Jardim Pitangueiras, Jundiaí - SP, 13206-716'],
['Unidade Nutrition Vale do Sol', -20.4229151, -49.9592271, 'Avenida pansani, 3092, Vale do sol, Votuporanga - SP, 15500-302'],
['Unidade Cidade Nova Montes Claros-Mg', -16.739527, -43.8653989, 'Avenida Dona Gregória, 101, Cidade Nova, Montes Claros - MG, 39400-464'],
['Unidade Centro Salto', -23.199741, -47.3008818, 'Avenida Dom Pedro II, 1421, Centro, Salto - SP, 13320-241'],
['Unidade ASSIS', -22.6575047, -50.397561, 'Rua Antônio da Silva Cunha Bueno, 425, Jardim Paulista, Assis - SP, 19815-080'],
['Unidade Paulinia', -22.743178, -47.1744984, 'Avenida João Aranha, 946, Alto de Pinheiros, Paulínia - SP, 13145-256'],
['Unidade SBC Centro', -23.7132318, -46.5532384, 'Rua Joaquim Nabuco, 56, Centro, São Bernardo do Campo - SP, 09720-375'],
['Unidade - Chácara', -23.6290144, -46.7025941, 'Rua da paz, 1498, Chácara Santo Antônio, São Paulo - SP, 04713-000'],
['Unidade Buriti', -23.2230818, -46.8760877, 'Rua Dom Pedro I, 462, Jardim Buriti, Várzea Paulista - SP, 13225-790'],
['Unidade BOA VISTA', -14.8793362, -40.832031, 'Avenida Gilenilda Alves, 1345, Boa Vista, Vitória da Conquista - BA, 45027-560'],
['Unidade Valinhos', -22.9623421, -46.9786923, 'Rua Lino Buzatto, 855, Jardim Pinheiros, Valinhos - SP, 13274-440'],
['Unidade nutriton', -5.8005449, -35.203111, 'Rua Joaquim Fagundes, 688, Barro vermelho, Natal - RN, 59022-500'],
];
var image = 'https://www.xxxx.xxx/assets/images/mark-01.png';
function initMap() {
var myOptions = {
center: new google.maps.LatLng(-26.1698353, -75.404261),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
setMarkers(map,locations);
}
function setMarkers(map,locations){
var marker, i
for (i = 0; i < locations.length; i++) {
var loan = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var add = locations[i][3]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map,
title: loan,
position: latlngset,
icon: image
});
var circulo = new google.maps.Circle(
{
map: map,
center: new google.maps.LatLng(lat, long),
radius: 2000, // 1000 metros = 1k.
strokeColor: "#818c99",
fillColor: "#ffffff",
fillOpacity: 0.70
});
map.setCenter(marker.getPosition())
var content = "<h5>" + loan + '</h5>' + "<strong>Endereço:</strong> " + add;
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
$(document).ready(function(){
$('body').attr('onload', 'initMap();');
});
</script>
Your question was very open, so it is not possible to answer it completely. The color/distance treatment of markers will be implemented according to the logic of your application, how the data is recovered and what events will be triggered to execute it. As regards the grouping of markers to Marker Clustering documentation can help you.
– Vinícius Carra