0
I have a site where the user can create bookmarks on the map and assign a category to those bookmarks. I would like each marker in each category to have a different image. someone knows how I do it?
0
I have a site where the user can create bookmarks on the map and assign a category to those bookmarks. I would like each marker in each category to have a different image. someone knows how I do it?
1
I have an example using 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);
}
0
You can define the images of each category previously (bringing the url of the same from the database, or storing directly in variables, etc.) and when creating the marker the image should be passed as a parameter.
The example below creates a simple map with a marker in the center using a previously defined image.
<!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>
Browser other questions tagged php javascript html google-maps
You are not signed in. Login or sign up in order to post.