Question

我已将谷歌地图与多个标记集成。默认情况下，应显示1个标记。通过单击标记2链接marker2位置需要打开。默认情况下如何打开信息窗口。

  Here is the fiddle [https://jsfiddle.net/sathyavs/kjxphszm/2/][1]

要默认打开信息窗口，我使用了以下代码。

google.maps.event.trigger(gmarkers[id],'click');

但是在小提琴中，单击相应的标记链接不会显示标记。它完全令人沮丧。请帮我。我做错了什么。

Answer 1

修复了代码和改进

每次点击链接时删除创建多个地图对象
更新了ShowMarker，以便在点击链接时显示标记和平移到该标记。

var infowindow = null;    
var arrMarkers = {};
var gmarkers = [];
var map;
// these are location
var sites = [
  ['Miyapur', 17.493336, 78.346531, 4, 'Plot 160, Mytri Nagar,<br> Madinaguda, Miyapur,<br> Hyderabad.<br><br>Phone:<br> 040 65081334, 040 65081335'],
  ['Irving Homestead', 17.402064, 78.484005, 2, 'Saboo R.K. Plaza,<br> Beside HDFC Bank,<br> Himayath Nagar,<br> Hyderabad <br><br>Phone:<br> 040 65355123, 040 65356123'],
  ['Boduppal', 17.419148, 78.584124, 1, 'Plot 160, ColonyBoduppal,<br> Hyderabad.<br><br>Phone:<br> 040 65081334, 040 65081335'],
  ['Habsiguda', 17.363610, 78.554393, 3, '3-73, Street No 6, Habsiguda,<br> Hyderabad. <br><br>Phone:<br> 040 65700233, 040 65700234'],
  ['Banjara Hills', 17.447863, 78.355354, 5, 'Plot 282, Ground Floor,<br> Road 12, Old MLA Colony, Banjara Hills,<br> Hyderabad. <br><br>Phone:<br> 040 65700222, 040 65700333'],
  ['Somajiguda', 17.428951, 78.456014, 6, 'Shop no 23, 6-3-1110, Ground Floor,<br> Amrutha Mall, Somajiguda,<br> Hyderabad. <br><br>Phone:<br> 040 65700233, 040 65700234'],
   ['Kondapur', 17.457073, 78.371499, 7, 'SMR Vinay Technopolis<br> P.NO. 89, Survey<br> No.13, Opposite- S& P Global, Kondapur,<br> Hyderabad. <br><br>Phone:<br> 040 33165120']
];

   
function initMap() {

    var centerMap = new google.maps.LatLng(17.493336, 78.346531);
    var myOptions = {
        zoom: 11,
        center: centerMap,
       // mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    setMarkers(map, sites,'');
    infowindow = new google.maps.InfoWindow({
        content: "loading..."
    });
    //var bikeLayer = new google.maps.BicyclingLayer();
    //bikeLayer.setMap(map);
}

function showmarker(id) { 
    setVisibility(id)
    google.maps.event.trigger(gmarkers[id],'click')
    map.panTo(gmarkers[id].getPosition())
}

function setMarkers(map, markers,id) {  
  for (var i = 0; i < markers.length; i++) {
    var sites = markers[i];
    var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
    var marker = new google.maps.Marker({
        position: siteLatLng,
        map: map,
        title: sites[0],
        zIndex: sites[3],
        html: sites[4]
    });
    var contentString = "Some content";
    google.maps.event.addListener(marker, "click", function () {
      console.log('info open');
        infowindow.setContent(this.html);
        infowindow.open(map, this);
        console.log('info end');
    });
    gmarkers.push(marker);           
  }
  setVisibility(0);
}

function setVisibility(id){
  // initial show first marker and hide all   
  for(var i=0;i<gmarkers.length;i++){
    gmarkers[i].setVisible(false); 
  }
  gmarkers[id].setVisible(true); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC85LOYsngItz49WJYalPzgSCGzXS-rU8E&callback=initMap"
    async defer></script>
    
<div id="map_canvas" style="width: 100%; height: 500px;"></div>

<li> <a href="javascript:void();" onclick="showmarker('0')">Marker 1</a></li>
<li><a href="javascript:void();" onclick="showmarker('1')">Marker 2</a></li>
<li><a href="javascript:void();" onclick="showmarker('2')">Marker 3</a></li>
<li><a href="javascript:void();" onclick="showmarker('2')">Marker 4</a></li>

谷歌地图多个标记打开信息窗口的外部链接

1 个答案: