657

Bastante novo no API do Google Maps. Eu tenho uma matriz de dados que desejo percorrer e plotar em um mapa. Parece bastante simples, mas todos os tutoriais com vários marcadores que encontrei são bastante complexos.

Vamos usar a matriz de dados do site do google como exemplo:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

Eu simplesmente quero plotar todos esses pontos e exibir uma janela de informações quando clicada para exibir o nome.

javascript google-maps google-maps-api-3 wesbos
fonte

1128

Este é o mais simples que eu poderia reduzir para:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

👨‍💻 Editar / bifurcar em um Codepen →

SCREENSHOT

Marcadores múltiplos do Google Maps

Há alguma mágica de fechamento acontecendo ao passar o argumento de retorno de chamada para o addListenermétodo Esse pode ser um tópico bastante complicado, se você não estiver familiarizado com o funcionamento dos fechamentos. Sugiro verificar o seguinte artigo da Mozilla para uma breve introdução, se for o caso:

❯ Mozilla Dev Center: Trabalhando com fechamentos

Daniel Vassallo
fonte

4

@RaphaelDDL: Sim, esses parênteses são necessários para realmente chamar a função sem nome. Os argumentos precisam ser passados devido à maneira como o JavaScript funciona (devido aos fechamentos). Veja a minha resposta a esta pergunta para um exemplo e mais informações: stackoverflow.com/a/2670420/222908

Daniel Vassallo

Boa resposta, mas poderia ser mais simplificada. Como todos os marcadores terão InfoWindows individuais e o JavaScript não se importa se você adicionar propriedades extras a um objeto, tudo o que você precisa fazer é adicionar um InfoWindowàs propriedades do Marcador e, em seguida, chamar .open()o InfoWindow. Eu teria postado a alteração aqui, mas as modificações foram grandes o suficiente para eu postar minha própria resposta .

Matthew Cordaro

Por que não usar new MarkerClusterer()em buscas massivas de desempenho? Confira a resposta da ChirsSwires.

DevWL

oi @ Daniel Vassallo, eu também tenho o mesmo requisito de exibir vários marcadores no meu projeto angular iônico. por favor me ajude, eu já fiz uma pergunta no stackoverflow. Aqui está o link da pergunta: stackoverflow.com/questions/57985967/…

Saif

Funciona. Obrigado. Como você removerá os marcadores do mapa do google porque você está usando uma única instância do marcador e inicializa em loop. Por favor, compartilhe seus pensamentos.

Kamlesh

59

Aqui está outro exemplo de vários marcadores carregando com um único titlee infoWindowtexto. Testado com a mais recente API do Google Maps V3.11.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Multiple Markers Google Maps</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
        // check DOM Ready
        $(document).ready(function() {
            // execute
            (function() {
                // map options
                var options = {
                    zoom: 5,
                    center: new google.maps.LatLng(39.909736, -98.522109), // centered US
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    mapTypeControl: false
                };

                // init map
                var map = new google.maps.Map(document.getElementById('map_canvas'), options);

                // NY and CA sample Lat / Lng
                var southWest = new google.maps.LatLng(40.744656, -74.005966);
                var northEast = new google.maps.LatLng(34.052234, -118.243685);
                var lngSpan = northEast.lng() - southWest.lng();
                var latSpan = northEast.lat() - southWest.lat();

                // set multiple marker
                for (var i = 0; i < 250; i++) {
                    // init markers
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
                        map: map,
                        title: 'Click Me ' + i
                    });

                    // process multiple info windows
                    (function(marker, i) {
                        // add click event
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow = new google.maps.InfoWindow({
                                content: 'Hello, World!!'
                            });
                            infowindow.open(map, marker);
                        });
                    })(marker, i);
                }
            })();
        });
        </script>
    </head>
    <body>
        <div id="map_canvas" style="width: 800px; height:500px;"></div>
    </body>
</html>

Screenshot de 250 marcadores:

API do Google Maps V3.11 com vários marcadores

Ele aleatoriamente automaticamente o Lat / Lng para torná-lo único. Este exemplo será muito útil se você quiser testar os marcadores 500, 1000, xxx e desempenho.

Madan Sapkota
fonte

1

Tenha cuidado ao postar copiar e colar respostas padrão / textuais para várias perguntas, pois elas tendem a ser sinalizadas como "spam" pela comunidade. Se você estiver fazendo isso, geralmente significa que as perguntas são duplicadas; portanto, sinalize-as como tal.

Kev

1

Isso fará com que muitos pop-ups sejam exibidos infoWindowpara cada marcador e não oculte o outro infoWindowse ele estiver sendo exibido no momento. é realmente útil :)

Kannika

@ Anup, se você acabou de ler a pergunta e comentar, seria melhor. a questão é perguntar "exemplo de marcador múltiplo" se é aleatório ou se é seu próprio bla bla.

Madan Sapkota

Novamente, por que não usar new MarkerClusterer()em buscas maciças por desempenho? Confira a resposta da ChirsSwires.

DevWL

1

@DevWL, foi respondida em 2013. Você pode atualizar gratuitamente.

Madan Sapkota

39

Eu pensei em colocar isso aqui, pois parece ser um ponto de aterrissagem popular para quem está começando a usar as APIs do Google Maps. Vários marcadores renderizados no lado do cliente provavelmente são a queda de muitos aplicativos de mapeamento em termos de desempenho. É difícil avaliar, corrigir e, em alguns casos, até estabelecer um problema (devido a diferenças na implementação do navegador, hardware disponível para o cliente, dispositivos móveis, a lista continua).

A maneira mais simples de começar a resolver esse problema é usar uma solução de agrupamento de marcadores. A idéia básica é agrupar locais geograficamente semelhantes em um grupo com o número de pontos exibidos. À medida que o usuário aproxima o zoom do mapa, esses grupos se expandem para revelar os marcadores individuais abaixo.

Talvez o mais simples de implementar seja a biblioteca markerclusterer . Uma implementação básica seria a seguinte (após a importação da biblioteca):

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(37.4419, -122.1419);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var location = yourData.location[i];
      var latLng = new google.maps.LatLng(location.latitude,
          location.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Os marcadores, em vez de serem adicionados diretamente ao mapa, são adicionados a uma matriz. Essa matriz é passada para a biblioteca que lida com cálculos complexos para você e anexada ao mapa.

Essas implementações não apenas aumentam enormemente o desempenho do lado do cliente, mas também em muitos casos levam a uma interface do usuário mais simples e menos confusa e à digestão mais fácil dos dados em escalas maiores.

Outras implementações estão disponíveis no Google.

Espero que isso ajude alguns dos mais novos às nuances do mapeamento.

ChrisSwires
fonte

2

Obrigado, uma grande grande ajuda! Há uma diferença de ordem ou magnitude no desempenho, colocando primeiro os pontos de dados google.map e depois transmitindo-os para a biblioteca de mapeamento, neste caso, MarketCluster para plotar. com cerca de 150.000 pontos de dados, o primeiro post de 'Daniel Vassallo' levou cerca de 2 minutos para carregar, esses 5 segundos. Muito obrigado 'Swires'!

21414 Waqas

1

Eu pensei que este seria um bom lugar para isso, eu imaginaria que a maioria das pessoas aterrissaria na pilha quando relacionada ao Google Maps é esta página, e existe o segundo 'por que meu mapa demora tanto para carregar'?

ChrisSwires

@Monic, seja qual for o seu conjunto de dados, é apenas uma variável de espaço reservado.

31715 Chrishrires

20

Versão assíncrona:

<script type="text/javascript">
  function initialize() {
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;
  </script>

sHaDeoNeR
fonte

15

Esta é a imagem de mapa de exemplo de trabalho

var arr = new Array();
    function initialize() { 
        var i;  
        var Locations = [
                {
                  lat:48.856614, 
                  lon:2.3522219000000177, 
                  address:'Paris',
                  gval:'25.5',
                  aType:'Non-Commodity',
                  title:'Paris',
                  descr:'Paris'           
                },        
                    {
                  lat: 55.7512419, 
                  lon: 37.6184217,
                  address:'Moscow',
                  gval:'11.5',
                  aType:'Non-Commodity',
                  title:'Moscow',
                  descr:'Moscow Airport'              
                },     

                {
              lat:-9.481553000000002, 
              lon:147.190242, 
              address:'Port Moresby',
              gval:'1',
              aType:'Oil',
              title:'Papua New Guinea',
              descr:'Papua New Guinea 123123123'              
            },
            {
           lat:20.5200,
           lon:77.7500,
           address:'Indore',
            gval:'1',
            aType:'Oil',
            title:'Indore, India',
            descr:'Airport India'
        }
    ];

    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(51.9000,8.4731),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    var infowindow =  new google.maps.InfoWindow({
        content: ''
    });

    for (i = 0; i < Locations.length; i++) {
            size=15;        
            var img=new google.maps.MarkerImage('marker.png',           
                new google.maps.Size(size, size),
                new google.maps.Point(0,0),
                new google.maps.Point(size/2, size/2)
           );

        var marker = new google.maps.Marker({
            map: map,
            title: Locations[i].title,
            position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),           
                icon: img
        });

        bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].descr + "</p>",Locations[i].title);  

    }

}

function bindInfoWindow(marker, map, infowindow, html, Ltitle) { 
    google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.setContent(html); 
            infowindow.open(map, marker); 

    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();

    }); 
}

Exemplo de trabalho completo. Você pode apenas copiar, colar e usar.

Anup
fonte

12

De exemplos da API do Google Map :

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

fonte

8

esta resposta não inclui a parte do infoWindow

onurmatik 22/11

@omat Estranhamente, os próprios documentos do Google não sugerem que deve haver uma parte do infoWindow. Mas, mesmo assim ele não está funcionando para mim também :(

Emil Ahlbäck

11

Aqui está outra versão que escrevi para salvar as propriedades do mapa, que coloca o ponteiro da janela de informações no lat e no comprimento reais do marcador, enquanto oculta temporariamente o marcador enquanto a janela de informações está sendo exibida.

Ele também elimina a atribuição padrão de 'marcador' e acelera o processamento atribuindo diretamente o novo marcador à matriz de marcadores na criação dos marcadores. Observe, no entanto, que propriedades adicionais foram adicionadas ao marcador e à janela de entrada, portanto essa abordagem é um pouco pouco convencional ... mas sou eu!

Nunca é mencionado nessas perguntas da janela de informações que a janela de informações padrão NÃO é colocada no intervalo e no ângulo do ponto do marcador, mas na parte superior da imagem do marcador. A visibilidade do marcador deve estar oculta para que isso funcione; caso contrário, a API do Google Maps empurrará a âncora da janela de retorno de volta para o topo da imagem do marcador.

A referência aos marcadores na matriz 'markers' é criada imediatamente após a declaração do marcador para quaisquer tarefas de processamento adicionais que possam ser desejadas posteriormente (ocultar / mostrar, agarrar as cordas, etc ...). Isso economiza a etapa adicional de atribuir o objeto marcador a 'marcador' e, em seguida, empurrar o 'marcador' para a matriz de marcadores ... muito processamento desnecessário no meu livro.

Enfim, uma visão diferente das janelas de entrada e espero que ajude a informar e inspirar você.

    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
    var map;
    var markers = [];

    function init(){
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var num_markers = locations.length;
      for (var i = 0; i < num_markers; i++) {  
        markers[i] = new google.maps.Marker({
          position: {lat:locations[i][1], lng:locations[i][2]},
          map: map,
          html: locations[i][0],
          id: i,
        });

        google.maps.event.addListener(markers[i], 'click', function(){
          var infowindow = new google.maps.InfoWindow({
            id: this.id,
            content:this.html,
            position:this.getPosition()
          });
          google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
            markers[this.id].setVisible(true);
          });
          this.setVisible(false);
          infowindow.open(map);
        });
      }
    }

google.maps.event.addDomListener(window, 'load', init);

Aqui está um JSFiddle em funcionamento

Nota adicional
Você notará neste exemplo de dados do Google um quarto lugar na matriz 'locais' com um número. Dado isso no exemplo, você também pode usar esse valor para o ID do marcador no lugar do valor atual do loop, de modo que ...

var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {  
  markers[i] = new google.maps.Marker({
    position: {lat:locations[i][1], lng:locations[i][2]},
    map: map,
    html: locations[i][0],
    id: locations[i][3],
  });
};

Epifania
fonte

10

Resposta aceita, reescrita no ES6:

$(document).ready(() => {
  const mapEl = $('#our_map').get(0); // OR document.getElementById('our_map');

  // Display a map on the page
  const map = new google.maps.Map(mapEl, { mapTypeId: 'roadmap' });

  const buildings = [
    {
      title: 'London Eye, London', 
      coordinates: [51.503454, -0.119562],
      info: 'carousel'
    },
    {
      title: 'Palace of Westminster, London', 
      coordinates: [51.499633, -0.124755],
      info: 'palace'
    }
  ];

  placeBuildingsOnMap(buildings, map);
});


const placeBuildingsOnMap = (buildings, map) => {
  // Loop through our array of buildings & place each one on the map  
  const bounds = new google.maps.LatLngBounds();
  buildings.forEach((building) => {
    const position = { lat: building.coordinates[0], lng: building.coordinates[1] }
    // Stretch our bounds to the newly found marker position
    bounds.extend(position);

    const marker = new google.maps.Marker({
      position: position,
      map: map,
      title: building.title
    });

    const infoWindow = new google.maps.InfoWindow();
    // Allow each marker to have an info window
    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.setContent(building.info);
      infoWindow.open(map, marker);
    })

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
  })
})

lakesare
fonte

6

Link de origem

Link de demonstração

Código HTML completo

Mostrar InfoWindow em Clique ou Passe o cursor.
Apenas um InfoWindow será mostrado

    <!DOCTYPE html>
    <html>

    <head>
        <style>
            /*  <span class="metadata-marker" style="display: none;" data-region_tag="css"></span>       Set the size of the div element that contains the map */
            #map {
                height: 400px;
                /* The height is 400 pixels */
                width: 100%;
                /* The width is the width of the web page */
            }
        </style>
        <script>
            var map;
            var InforObj = [];
            var centerCords = {
                lat: -25.344,
                lng: 131.036
            };
            var markersOnMap = [{
                    placeName: "Australia (Uluru)",
                    LatLng: [{
                        lat: -25.344,
                        lng: 131.036
                    }]
                },
                {
                    placeName: "Australia (Melbourne)",
                    LatLng: [{
                        lat: -37.852086,
                        lng: 504.985963
                    }]
                },
                {
                    placeName: "Australia (Canberra)",
                    LatLng: [{
                        lat: -35.299085,
                        lng: 509.109615
                    }]
                },
                {
                    placeName: "Australia (Gold Coast)",
                    LatLng: [{
                        lat: -28.013044,
                        lng: 513.425586
                    }]
                },
                {
                    placeName: "Australia (Perth)",
                    LatLng: [{
                        lat: -31.951994,
                        lng: 475.858081
                    }]
                }
            ];

            window.onload = function () {
                initMap();
            };

            function addMarkerInfo() {
                for (var i = 0; i < markersOnMap.length; i++) {
                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';

                    const marker = new google.maps.Marker({
                        position: markersOnMap[i].LatLng[0],
                        map: map
                    });

                    const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });

                    marker.addListener('click', function () {
                        closeOtherInfo();
                        infowindow.open(marker.get('map'), marker);
                        InforObj[0] = infowindow;
                    });
                    // marker.addListener('mouseover', function () {
                    //     closeOtherInfo();
                    //     infowindow.open(marker.get('map'), marker);
                    //     InforObj[0] = infowindow;
                    // });
                    // marker.addListener('mouseout', function () {
                    //     closeOtherInfo();
                    //     infowindow.close();
                    //     InforObj[0] = infowindow;
                    // });
                }
            }

            function closeOtherInfo() {
                if (InforObj.length > 0) {
                    /* detach the info-window from the marker ... undocumented in the API docs */
                    InforObj[0].set("marker", null);
                    /* and close it */
                    InforObj[0].close();
                    /* blank the array */
                    InforObj.length = 0;
                }
            }

            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: centerCords
                });
                addMarkerInfo();
            }
        </script>
    </head>

    <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>

        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

    </body>

    </html>

Code Spy
fonte

1

Obrigado pelo closeOtherInfo, não consegui encontrar uma solução decente para trabalhar com o merkercluster até sua resposta. :)

chris loughnane

1

Agora é isso que eu estava procurando. Obrigado cara trabalho excelente em 2020

Faizan Anwer Ali Rupani

5

Adicionar um marcador no seu programa é muito fácil. Você pode adicionar este código:

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: 'Hello World!'
});

Os seguintes campos são particularmente importantes e geralmente definidos quando você constrói um marcador:

position(obrigatório) especifica um LatLng que identifica o local inicial do marcador. Uma maneira de recuperar um LatLng é usando o serviço de geocodificação .
map(opcional) especifica o mapa no qual colocar o marcador. Se você não especificar um mapa na construção do marcador, o marcador será criado, mas não será anexado ao (ou exibido no) mapa. Você pode adicionar o marcador posteriormente chamando o setMap()método do marcador .

Observe que , no exemplo, o campo de título define o título do marcador que aparecerá como uma dica de ferramenta.

Você pode consultar a documentação da API do Google aqui .

Este é um exemplo completo para definir um marcador em um mapa. Tenha cuidado, você deve substituir YOUR_API_KEYpela chave da API do Google :

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <title>Simple markers</title>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
 <div id="map"></div>
<script>

  function initMap() {
    var myLatLng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Agora, se você deseja plotar marcadores de uma matriz em um mapa, faça o seguinte:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function initMap() {
  var myLatLng = {lat: -33.90, lng: 151.16};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: myLatLng
    });

  var count;

  for (count = 0; count < locations.length; count++) {  
    new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0]
      });
   }
}

Este exemplo me fornece o seguinte resultado:

Você também pode adicionar uma infoWindow no seu alfinete. Você só precisa deste código:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[count][1], locations[count][2]),
    map: map
    });

marker.info = new google.maps.InfoWindow({
    content: 'Hello World!'
    });

Você pode ter a documentação do Google sobre o infoWindows aqui .

Agora, podemos abrir o infoWindow quando o marcador for "clik" assim:

var marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[count][1], locations[count][2]),
     map: map
     });

marker.info = new google.maps.InfoWindow({
     content: locations [count][0]
     });


google.maps.event.addListener(marker, 'click', function() {  
    // this = marker
    var marker_map = this.getMap();
    this.info.open(marker_map, this);
    // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
            });

Observe que você pode ter alguma documentação Listener aqui no google developer.

E, finalmente, podemos plotar uma infoWindow em um marcador se o usuário clicar nele. Este é o meu código completo:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
    <style>
    /* Always set the map height explicitly to define the size of the div
    * element that contains the map. */
    #map {
        height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>

    var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];


    // When the user clicks the marker, an info window opens.

    function initMap() {
        var myLatLng = {lat: -33.90, lng: 151.16};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: myLatLng
            });

        var count=0;


        for (count = 0; count < locations.length; count++) {  

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                map: map
                });

            marker.info = new google.maps.InfoWindow({
                content: locations [count][0]
                });


            google.maps.event.addListener(marker, 'click', function() {  
                // this = marker
                var marker_map = this.getMap();
                this.info.open(marker_map, this);
                // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
                });
        }
    }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
</body>
</html>

Normalmente, você deve ter este resultado:

SphynxTech
fonte

4

Seguindo a resposta de Daniel Vassallo , aqui está uma versão que trata da questão do fechamento de uma maneira mais simples.

Como todos os marcadores terão um InfoWindow individual e o JavaScript não se importa se você adicionar propriedades extras a um objeto, tudo o que você precisa fazer é adicionar um InfoWindow às propriedades do Marcador e, em seguida, chamar .open()o InfoWindow por si mesmo!

Editar: com dados suficientes, o carregamento da página pode levar muito tempo; portanto, em vez de construir o InfoWindow com o marcador, a construção deve acontecer apenas quando necessário. Observe que todos os dados usados para construir o InfoWindow devem ser anexados ao Marcador como uma propriedade ( data). Observe também que, após o primeiro evento de clique, infoWindowpersistirá como uma propriedade do marcador, para que o navegador não precise ser reconstruído constantemente.

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(-33.92, 151.25)
});

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    data: {
      name: locations[i][0]
    }
  });
  marker.addListener('click', function() {
    if(!this.infoWindow) {
      this.infoWindow = new google.maps.InfoWindow({
        content: this.data.name;
      });
    }
    this.infoWindow.open(map,this);
  })
}

Matthew Cordaro
fonte

2

Aqui está um exemplo quase completo da função javascript que permitirá vários marcadores definidos em um JSONObject.

Ele exibirá apenas os marcadores que estão nos limites do mapa.

Isso é importante para que você não esteja fazendo um trabalho extra.

Você também pode definir um limite para os marcadores para não mostrar uma quantidade extrema de marcadores (se houver a possibilidade de algo em seu uso);

também não exibirá marcadores se o centro do mapa não tiver mudado mais de 500 metros.
Isso é importante porque se um usuário clicar no marcador e arrastar o mapa acidentalmente enquanto faz isso, você não deseja que o mapa recarregue os marcadores.

Anexei essa função ao ouvinte de evento ocioso do mapa, para que os marcadores sejam exibidos apenas quando o mapa estiver ocioso e exibam os marcadores novamente após um evento diferente.

Na captura de tela de ação, há uma pequena alteração na captura de tela, mostrando mais conteúdo na janela de entrada. colado de pastbin.com

<script src="//pastebin.com/embed_js/uWAbRxfg"></script>

Expandir snippet

Thunderstick
fonte

0

Aqui está um exemplo de vários marcadores no Reactjs .

Abaixo está o componente do mapa

import React from 'react';
import PropTypes from 'prop-types';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';

const MapContainer = (props) => {
  const [mapConfigurations, setMapConfigurations] = useState({
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {}
  });

  var points = [
    { lat: 42.02, lng: -77.01 },
    { lat: 42.03, lng: -77.02 },
    { lat: 41.03, lng: -77.04 },
    { lat: 42.05, lng: -77.02 }
  ]
  const onMarkerClick = (newProps, marker) => {};

  if (!props.google) {
    return <div>Loading...</div>;
  }

  return (
    <div className="custom-map-container">
      <Map
        style={{
          minWidth: '200px',
          minHeight: '140px',
          width: '100%',
          height: '100%',
          position: 'relative'
        }}
        initialCenter={{
          lat: 42.39,
          lng: -72.52
        }}
        google={props.google}
        zoom={16}
      >
        {points.map(coordinates => (
          <Marker
            position={{ lat: coordinates.lat, lng: coordinates.lng }}
            onClick={onMarkerClick}
            icon={{
              url: 'https://res.cloudinary.com/mybukka/image/upload/c_scale,r_50,w_30,h_30/v1580550858/yaiwq492u1lwuy2lb9ua.png',
            anchor: new google.maps.Point(32, 32), // eslint-disable-line
            scaledSize: new google.maps.Size(30, 30)  // eslint-disable-line
            }}
            name={name}
          />))}
        <InfoWindow
          marker={mapConfigurations.activeMarker}
          visible={mapConfigurations.showingInfoWindow}
        >
          <div>
            <h1>{mapConfigurations.selectedPlace.name}</h1>
          </div>
        </InfoWindow>
      </Map>
    </div>
  );
};

export default GoogleApiWrapper({
  apiKey: process.env.GOOGLE_API_KEY,
  v: '3'
})(MapContainer);

MapContainer.propTypes = {
  google: PropTypes.shape({}).isRequired,
};

akolliy
fonte

API JS do Google Maps v3 - Exemplo simples de vários marcadores

Respostas:

Resposta aceita, reescrita no ES6: