You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.3 KiB
105 lines
3.3 KiB
<div id="map" style="width:100%; height:400px;">
|
|
|
|
</div>
|
|
<script>
|
|
$(document).ready(function() {
|
|
initMap();
|
|
});
|
|
|
|
function initMap() {
|
|
|
|
var center = new google.maps.LatLng(-3.480523, 7.866211);
|
|
|
|
var bounds = new google.maps.LatLngBounds();
|
|
|
|
var map = new google.maps.Map(document.getElementById("map"), {
|
|
zoom: 2,
|
|
center: center,
|
|
mapTypeControl: true,
|
|
mapTypeControlOptions: {
|
|
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
|
|
},
|
|
navigationControl: true,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
|
});
|
|
|
|
var extraFields = {{ extra_field_values_formatted|json_encode }};
|
|
|
|
for (var i = 0; i < extraFields.length; i++) {
|
|
|
|
var index = i + 1;
|
|
|
|
for (var y = 0; y < extraFields[i].length; y++) {
|
|
|
|
var address = extraFields[i][y]['address'];
|
|
var userCompleteName = extraFields[i][y]['user_complete_name'];
|
|
|
|
addMaker(address, map, bounds, userCompleteName, index);
|
|
}
|
|
}
|
|
}
|
|
|
|
function addMaker(address, map, bounds, userCompleteName, index) {
|
|
|
|
if (index > 5) {
|
|
return;
|
|
}
|
|
|
|
var infoWindow = new google.maps.InfoWindow();
|
|
|
|
var geocoder = geocoder = new google.maps.Geocoder();
|
|
|
|
var formattedAddress = '';
|
|
|
|
geocoder.geocode({ 'address': address }, function (results, status) {
|
|
|
|
if (status === google.maps.GeocoderStatus.OK) {
|
|
|
|
if (results) {
|
|
formattedAddress = results[0].formatted_address;
|
|
} else {
|
|
formattedAddress = '{{ 'Unknown' | get_lang }}';
|
|
}
|
|
|
|
var marker = new google.maps.Marker({
|
|
map: map,
|
|
position: results[0].geometry.location,
|
|
label: userCompleteName
|
|
});
|
|
|
|
switch (index) {
|
|
case 1:
|
|
marker.setIcon('//maps.google.com/mapfiles/ms/icons/red-dot.png');
|
|
break;
|
|
case 2:
|
|
marker.setIcon('//maps.google.com/mapfiles/ms/icons/blue-dot.png');
|
|
break;
|
|
case 3:
|
|
marker.setIcon('//maps.google.com/mapfiles/ms/icons/green-dot.png');
|
|
break;
|
|
case 4:
|
|
marker.setIcon('//maps.google.com/mapfiles/ms/icons/yellow-dot.png');
|
|
break;
|
|
case 5:
|
|
marker.setIcon('//maps.google.com/mapfiles/ms/icons/purple-dot.png');
|
|
break;
|
|
}
|
|
|
|
var infoWinContent = "<b>" + userCompleteName + "</b> - " + formattedAddress;
|
|
|
|
marker.addListener('click', function() {
|
|
infoWindow.setContent(infoWinContent);
|
|
infoWindow.open(map, marker);
|
|
});
|
|
|
|
bounds.extend(marker.position);
|
|
map.fitBounds(bounds);
|
|
|
|
} else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
|
|
setTimeout(function() {
|
|
addMaker(address, map, bounds, userCompleteName, index);
|
|
}, 350);
|
|
}
|
|
});
|
|
}
|
|
</script> |