繁体   English   中英

如何在Google地图中自动打开特定标记的信息框?

[英]How can I open info box of specific marker automatically in Google Maps?

我想通过给定标记的ID自动打开标记的信息框。

//Data of markers are from JSON
var markers = new google.maps.Marker({
      id: place.id,
      map: map,
      title:place.title,
      icon : 'assets/frontend/images/marker.png'
    });
infoWindow = new google.maps.InfoWindow();
infoWindow.open(map, markers);

例如,假设我要打开ID = 243的标记的信息框

var marker_id = 243;

您可以将google-maps-utility-library-v3用于信息框,按如下所示修改代码,如果您有多个标记,并且根据这些标记需要多个信息框,则可以重复该infobox的代码,首先尝试一个标记,您可以有主意。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js"></script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script language="javascript">
//Data of markers are from JSON
$(document).ready(function(){   
            /*Your map code needs to be here*/
            /*Marker being created below*/
    var markers = new google.maps.Marker({
          id: place.id,
          map: map,
          title:place.title,
          icon : 'assets/frontend/images/marker.png'
        });

    var boxText = document.createElement("div");
      boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
      boxText.innerHTML = "Your map info here";
      var myOptions_txtbox = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-140, 0)
        ,zIndex: null
        ,boxStyle: { 
          background: "url('tipbox.gif') no-repeat"
          ,opacity: 0.75
          ,width: "280px"
         }
        ,closeBoxMargin: "10px 2px 2px 2px"
        ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
            };
            /*Text box being created for marker `markers` */
    var infobox_new = new InfoBox(myOptions_txtbox);
            /*Created text box is assigned for marker `markers`. You can assign any event. For now, I have selected on `click` */
    google.maps.event.addListener(markers, "click", function (e) {
        infobox_new.open(map, this);
    });
});
    </script>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM