php - 在谷歌地图中创建新的信息窗口

Question

如何创建由我们定制的新信息窗口，而不是谷歌提供的默认窗口。我需要为我的网站创建和定制一个新的。（不是 google.maps.InfoWindow）

Answer 1

如果您不想使用 Google 的默认 InfoWindow，请查看InfoBubble。

infobubble.js是一个单独的文件，非常简单且易于编辑其样式。

仅供参考：这得到了广泛的支持，因此如果您遇到任何问题，您甚至可以在此处提出标记为infobubble的问题。

最好不要重新发明轮子，它会消耗你很多时间。但是如果你想学习，你可以试试。

Answer 2

您可以使用信息框。它基本上扩展了 infoWindow 类，允许更多的自定义和样式。

请访问此链接以获取infoBOX。

如果是 InfoWindows，您可以这样做：

   var infoWindow = new google.maps.InfoWindow({
        content: '<div id="content">'+Content+
        '</div>'
      });

你可以随意设计它。

Answer 3

请阅读这篇文章 ，它会更有帮助。

您只需使用 google 提供的InfoBox类来实现这一点，您可以在此处找到。它基本上扩展了infoWindow类，允许更多的自定义和样式。

更多详细信息请阅读此链接和链接

Answer 4

我使用以下脚本在谷歌地图中创建和自定义新的信息窗口

    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
    <script type="text/javascript">
     var locations = [
      ['chennai', 13.0810, 80.2740, 4],
      ['madurai', 9.9300, 78.1200, 5],
      ['coimbatore', 11.0183, 76.9725, 3],
      ['Trichy', 10.8100, 76.9725, 2],
      ['vellore', 12.9202, 79.1333, 1]
    ];

   var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(13.0810, 80.2740),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

   var infowindow = new google.maps.InfoWindow();
var info = '<div class="mybackground" style="width:346px; height:183px; background-image:url(images/popup.png);"> For more Details <a href="smaatapps.com/citycaching/"><img src="images/i.png" width="46" height="45">'  + '</div>';

     var marker, i;
var icon='images/';
    for (i = 0; i < locations.length; i++) {  

  var marker = new google.maps.Marker({
        map: map,
        draggable: false,
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: 'images/pin.png',
        visible: true
    });


    var boxText = document.createElement("div");
    boxText.style.cssText = "background-image:url(images/popup.png); width:346px; height:183px;";
    boxText.innerHTML = "<p style='padding-left:40px; position:relative;top:20px;color:white; v-align:center;'><table style='color:white;padding-top:60px'><tr><td><img src='images/i.png' width='46' height='45'></td><td><a href='http://smaatapps.com/citycaching/overview.php'>For More Information</a></td></tr></table></p>";


      var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-10, 0)
        ,zIndex: null
        ,boxStyle: { 
          background: "url('popup.png') no-repeat"
          ,width: "346px"
         }
        ,closeBoxMargin: "22px 29px 2px 2px"
        ,closeBoxURL: "images/close.png"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
    };




  var ib = new InfoBox(myOptions);
   google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      ib.setContent('<div class="mybackground" style="width:346px; height:183px; background-image:url(images/popup.png);"><p style="padding-top:40px;color:white; padding-left:40px;">' + locations[i][0] + '</p><p style="padding-left:40px; position:relative;top:20px;color:white; v-align:center;"><a href="http://smaatapps.com/citycaching/overview.php?id=' + locations[i][3] + '"><table style="color:white;"><tr><td><img src="images/i.png" width="46" height="45"></td><td>For More Information</td></tr></table></p>'  +   '</div>');
     ib.open(map, marker);
    }
  })(marker, i));





     }
    </script>