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

时光毁灭记忆、已成空白 提交于 2019-12-11 07:38:10

问题


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;

回答1:


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>


来源:https://stackoverflow.com/questions/14207999/how-can-i-open-info-box-of-specific-marker-automatically-in-google-maps

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!