时间戳

首页 > 解决方案 > Adding links to Google Maps Markers outside of the map using options in a select dropdown

jquery - Adding links to Google Maps Markers outside of the map using options in a select dropdown

问题描述

I have a Google Map with Various locations and I want to be able to goto and open the Info Window when a link - outside of the map is clicked.

Below is the relevant bits of the working code, but I want to put the links into a select drop down rather than just text links in a div

  $('#markers').append('<a class="marker-link" data-markerid="' + i + '" href="#">' + locations[i][1] + '</a> ');

  google.maps.event.addListener(marker, 'click', (function (marker, i) {

  $('.marker-link').on('click', function () {
  google.maps.event.trigger(markers[$(this).data('markerid')], 'click');
  });

BTW there is the following div in the HTML

  <div id="markers"></div>

To try and get it to work as a drop down I have changed this line

  $('#markers').append('<a class="marker-link" data-markerid="' + i + '" href="#">' + locations[i][1] + '</a> ');

to

  $('#dropdown').append('<option data-markerid="' + i + '">' + locations[i][1] + '</option>');

and then added this into the HTML

  <select id="dropdown"></select>

I then do get a drop down with all the various titles and each option has

  data-markerid="0"
  data-markerid="1"

and I also added

  $( "#dropdown" ).change(function() {
    google.maps.event.trigger(markers[$(this).data('markerid')], 'click');
  });

But when I select an item from the drop down it does not go to and show the relevant InfoWindow

标签： jquerygoogle-mapsinfowindoweventtrigger

解决方案

实际上我最终以不同的方式执行此操作 - 但它达到了相同的结果 - 具有不同位置的 Google 地图和地图外部的下拉菜单，可用于导航到每个位置并显示 InfoWindow

  var map;
  var info = new google.maps.InfoWindow();
  var gmarkers = [];
  var side_bar_html = "";

  function initialize() {
        var mapOptions = {
        center: {lat: 0, lng: 0},
        ...options...
  };

  map = new google.maps.Map(document.getElementById('map'), mapOptions);
        var markers = [
        ['Location 1', 0, 0, 'Description 1'],
        ['Location 2', 0, 1, 'Description 2'],
        ['Location 3', 1, 0, 'Description 3'],
        ...etc...
      ];

  for (var i = 0; i < markers.length; i++) {
        marker = addMarker(i);
  }

  // put the assembled side_bar_html contents into the side_bar div

  document.getElementById("side_bar").innerHTML = "<select onchange='myclick(this.value);'>"+side_bar_html+"</select>";

  function addMarker(i) {
        var draftMarker = markers[i];
        var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: draftMarker[0]
        });

  google.maps.event.addListener(marker, 'click', function () {
        info.setContent(draftMarker[3]);
        info.open(map, marker);
    });
    gmarkers.push(marker);

  side_bar_html += '<option value=' + (gmarkers.length-1) + '>' + draftMarker[0] + '<\/option>';
    return marker;
    }
  }

  // This function picks up the click and opens the corresponding info window

  function myclick(i) {

  map.setCenter(gmarkers[i].getPosition());
  google.maps.event.trigger(gmarkers[i], "click");

  }

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

然后将其添加到 HTML

  <div id="side_bar"></div>

推荐阅读