如何在Google地图中自动打开特定标记的信息框？ [英] How can I open info box of specific marker automatically in Google Maps?

问题描述

  //标记的数据来源于标记的数据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; 
  

解决方案

您可以使用 maps-utility-library-v3 为信息框，修改你的代码如下，如果你有多个标记并需要多个信息框根据标记，你可以重复代码信息框，首先尝试一个标记，你可以有想法。

 <脚本类型=text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script> 
< script type =text / javascriptsrc =http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js >< /脚本> 
< script type =text / javascriptsrc =// maps.googleapis.com/maps/api/js?sensor=true&libraries=places\"></script> 
< script language =javascript> 
 //标记的数据来自JSON 
 $（document）.ready（function（）{
 / *您的地图代码需要在这里* / 
 / * Marker在下面创建* / 
 var markers = new google.maps.Marker（{
 id：place.id，
 map：map，
 title：place.title，
图标：'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 
，窗格：floatPane
，enableEventPropagation：false 
}; 
 / *为标记`markers`创建的文本框* / 
 var infobox_new = new InfoBox（myOptions_txtbox）; 
 / *创建的文本框被分配给标记标记。您可以分配任何事件。现在，我选择了`click` * / 
 google.maps.event.addListener（marker，click，function（e）{
 infobox_new.open（map，this）; 
}）; 
}）; 
< / script> 
  

I want to open an info box of a marker automatically by given marker's 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);

For example, Assuming that I want to open info box of marker that has id = 243

var marker_id = 243;

解决方案

You can use google-maps-utility-library-v3 for infobox, modify your code as following, if you have multiple markers and need multiple info box according to the markers, you can repeat the code for the infobox, first try for a single marker and you can have idea.

<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>

这篇关于如何在Google地图中自动打开特定标记的信息框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！