Tenho um site no qual o usuário pode criar marcadores no mapa e atribuir uma categoria a esses marcadores. Gostaria que cada marcador de cada categoria tivesse uma imagem diferente. alguém sabe como faço isso?
2 Respostas
Tenho um exemplo utilizando angular: https://github.com/emirdeliz/meus-projetos/tree/master/google-maps-custom
app.controller("GoogleMapsCustomController", function($scope) {
$scope.map = { center: { latitude: -23.586172, longitude: -46.657085 }, zoom: 10};
$scope.map.randomMarkers = [];
var adressOfCustomer = [
["BAZAR BARAO LTDA ME", "AV.JOAO XXIII,84-V.FORMOSA, SP"],
["MAGAZINE BELEZA CENTER LTDA", "AV DOS IGARAPES, 1571, SP"],
["ESTACIONAMENTO CARREIRA LTDA ME", "AV.SAPOPEMBA,3016 SAPOPEMBA, SP"],
["LUIS GONZAGA GARDINALI ME", "R.FREI CANECA,22 - CENTRO, SP"],
["A R NETTO", "R.ANTONIO GONCALVES TEIXEIRA, 53, SP"],
["O DONEGA MOJI MIRIM ", "R.BUTANTA, 17-PINHEIROS, SP"],
["MAGAZINE MISS ELEGAN LTDA", "R GOVERNADOR PEDRO DE TOLEDO 1021, SP"],
["O.Y.OKI & CIA.LTDA ", "R.JOSE BONIFACIO,60, SP"]
];
$scope.setMarkers = function(numberOfMarkers) {
setLatitudeAndLongitudeByAdress(adressOfCustomer, $scope.map);
};
$scope.onMarkerClicked = function(marker){
marker.showWindow = true;
$scope.$apply();
};
});
app.controller("InfoController", function($scope) {
$scope.templateValue = 'hello from the template itself';
$scope.clickedButtonInWindow = function() {
var msg = 'clicked a window in the template!';
$log.info(msg);
alert(msg);
}
});
function setLatitudeAndLongitudeByAdress(adressOfCustomer, map){
var geocoder = new google.maps.Geocoder();
angular.forEach(adressOfCustomer, function(value, key) {
var adress = value[1];
geocoder.geocode({ 'address': adress + ', Brasil', 'region': 'BR' }, function (results, status) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var customer = value[0];
var itemMap = {
latitude : latitude,
longitude : longitude,
title : customer,
id : key,
adress : adress,
date : "10/11/2015"
icon : <aqui define o icone. Passar o caminho de uma img>
};
map.randomMarkers.push(itemMap);
});
});
}
function init(){
var adressOfCustomer = [
["BAZAR BARAO LTDA ME", "AV.JOAO XXIII,84-V.FORMOSA, SP"],
["MAGAZINE BELEZA CENTER LTDA", "AV DOS IGARAPES, 1571, SP"],
["ESTACIONAMENTO CARREIRA LTDA ME", "AV.SAPOPEMBA,3016 SAPOPEMBA, SP"],
["LUIS GONZAGA GARDINALI ME", "R.FREI CANECA,22 - CENTRO, SP"],
["A R NETTO", "R.ANTONIO GONCALVES TEIXEIRA, 53, SP"],
["O DONEGA MOJI MIRIM ", "R.BUTANTA, 17-PINHEIROS, SP"],
["MAGAZINE MISS ELEGAN LTDA", "R GOVERNADOR PEDRO DE TOLEDO 1021, SP"],
["O.Y.OKI & CIA.LTDA ", "R.JOSE BONIFACIO,60, SP"]
];
var locationOfCustomer = getLatitudeAndLongitudeByAdress(adressOfCustomer);
initializeMaps(locationOfCustomer);
}
Você pode definir as imagens de cada categoria previamente (trazendo a url das mesmas do banco de dados, ou armazenando diretamente em variáveis, etc) e ao criar o marcador a imagem deve ser passada como um parâmetro.
O exemplo abaixo cria um mapa simples com um marcador ao centro usando uma imagem definida previamente.
<!DOCTYPE html>
<html>
<head>
<title> Marcador </title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -19.919, lng: -43.938},
zoom: 13
});
// posição do marcador
var posicao = new google.maps.LatLng(-19.919115639305936, -43.93845113370514);
// endereço da imagem
var image = 'http://www.alexandremucci.com.br/software/transitobh/images/cctv_naoapagar.png';
// criação do marcador com posição, mapa e imagem passados como parâmetro
var marcador = new google.maps.Marker({position: posicao, map: map, icon: image});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</body>
</html>