Gostaria de uma ajuda como faço pra personalizar marcadores do google maps, por exemplo mudar cor do balão e adicionar uma caixa de texto personalizada, estou desenvolvendo o mapa google no vue.js.
Desde já agradeço.
Obrigada
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Gostaria de uma ajuda como faço pra personalizar marcadores do google maps, por exemplo mudar cor do balão e adicionar uma caixa de texto personalizada, estou desenvolvendo o mapa google no vue.js.
Desde já agradeço.
Obrigada
Eu tenho um exemplo de como faz isso, mas não utilizado Vue. Você vai ter que adaptar.
O marcador personalizado é um objeto do tipo "google.maps.Marker". Você pode desenhar os seus próprios marcadores e inserir na programação.
Já a caixa de texto que pode ser exibida ao colocar o mouse sobre o marcador é um objeto do tipo "infoWindow"
No exemplo abaixo, a programação consome um backend e faz um loop com os resultados. Para cada resultado, ele adiciona um marcador e uma caixa. Os marcadores tem nomes sequenciais (1.png, 2.png, 3.png....) mas esse formato não é obrigatório, o nome pode ser do jeito que você quiser.
<html lang="pt-BR">
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var gmarkers = [];
function load() {
var myLatlng = new google.maps.LatLng(-23.6, -46.5667);
var mapOptions = {
center: myLatlng,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infoWindow = new google.maps.InfoWindow;
// Buscando os dados XML do servidor...
downloadUrl("xml/dados.php", function(data) {
var xml = data.responseXML;
//Todos os profissionais localizados....
var markers = xml.documentElement.getElementsByTagName("profissional");
//Para cada profissional, gerar um marcador personalizado e uma caixa de informacao...
for (var i = 0; i < markers.length; i++) {
var codigo = markers[i].getElementsByTagName("codigo")[0].childNodes[0].nodeValue;
var name = markers[i].getElementsByTagName("nome")[0].childNodes[0].nodeValue;
var address = markers[i].getElementsByTagName("telefone_comercial")[0].childNodes[0].nodeValue;
var site = markers[i].getElementsByTagName("site")[0].childNodes[0].nodeValue;
var point = new google.maps.LatLng(
parseFloat(markers[i].getElementsByTagName("latitude")[0].childNodes[0].nodeValue),
parseFloat(markers[i].getElementsByTagName("longitude")[0].childNodes[0].nodeValue));
var html = "<b>" + name + "</b> <br/>" + address + "<br><a href="+site + " target=_blank>Clique aqui para ver o site</a>";
var marker = new google.maps.Marker({
map: map,
position: point,
icon: 'icone_mapas/' + (parseInt(i) + 1) + '.png'
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
gmarkers.push(marker);
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onLoad="load()">
<div id="map"></div>
</body>
</html>Olá, bom dia Daniel!
Vou tentar aqui o código. Muito obrigada pela ajuda.
Abraços.
Olá bom dia !
estou desenvolvendo um componente no vue.js do map google. Gostaria de uma ajuda tem como a chave da API do Google Maps não ficar fixa na aplicação, tem como criar um mecanismo para a mesma ser aplicada de acordo com o ambiente em que a aplicação está rodando.?
Muito Obrigada.