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
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.