DoCow
  1. DoCow
  3. Adicione marcador com a API Javascript do Google Maps para exibir exatamente como marcadores adicionados em maps.google.com

Adicione marcador com a API Javascript do Google Maps para exibir exatamente como marcadores adicionados em maps.google.com

Estou tentando adicionar um mapa ao meu site usando a API Javascript do Google Maps. Eu quero que pareça exatamente como o mapa que foi criado com o maps.google.com:

insira a descrição da imagem aqui

Mas eu não consigo alcançar esse resultado, apenas isso:

insira a descrição da imagem aqui

Então, minha pergunta é: como adicionar um ponto vermelho na parte inferior de um marcador e como fazer com que o título seja escrito à direita desse ponto em negrito?

Este é o meu código: 

function initMap() { var coordinates = { lat: 40.785845, lng: -74.020496 }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: coordinates, scrollwheel: false }); var marker = new google.maps.Marker({ position: coordinates, map: map, label: "5409 Madison St" }); }

Para personalizar o texto da etiqueta, consulte a documentação do object anônimo markerLabel . Para controlar a posição do label, você precisa usar a propriedade Icon labelOrigin . 

 var marker = new google.maps.Marker({ position: coordinates, map: map, icon: { url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png", labelOrigin: new google.maps.Point(75, 32), size: new google.maps.Size(32,32), anchor: new google.maps.Point(16,32) }, label: { text: "5409 Madison St", color: "#C70E20", fontWeight: "bold" } });

Para adicionar o “ponto vermelho” na parte inferior do marcador, a maneira mais simples é criar outro marcador no mesmo local (embora você possa criar um ícone para o marcador que inclua tanto o sarampo quanto o vermelho padrão marcador “bolha”). 

 var measle = new google.maps.Marker({ position: coordinates, map: map, icon: { url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", size: new google.maps.Size(7, 7), anchor: new google.maps.Point(4, 4) } });

prova de conceito violino

marcador de texto vermelho

fragment de código: 

 function initMap() { var coordinates = { lat: 40.785845, lng: -74.020496 }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: coordinates, scrollwheel: false }); var measle = new google.maps.Marker({ position: coordinates, map: map, icon: { url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", size: new google.maps.Size(7, 7), anchor: new google.maps.Point(3.8, 3.8) } }); var marker = new google.maps.Marker({ position: coordinates, map: map, icon: { url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png", labelOrigin: new google.maps.Point(75, 32), size: new google.maps.Size(32, 32), anchor: new google.maps.Point(16, 32) }, label: { text: "5409 Madison St", color: "#C70E20", fontWeight: "bold" } }); } google.maps.event.addDomListener(window, "load", initMap); 
 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }
Intereting Posts