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

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

您可以使用InfoBox。它基本上扩展了infoWindow类，允许更多的定制和样式

请访问此链接以获取更多信息

对于InfoWindows，您可以执行以下操作：

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

var infoWindow=new google.maps.infoWindow({
内容：''+内容+
''
});

---

你可以随心所欲地设计它。

如果你不想使用谷歌的默认信息窗口，那么看看

是一个单独的文件，非常简单，易于编辑其样式

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

最好不要重新发明轮子，它会占用你很多时间。但是如果你想学习的话，你可以试一下。

请阅读它会更有帮助

您只需使用google提供的InfoBox类即可实现此功能。它基本上扩展了infoWindow类，允许更多的定制和样式

---

更多详细信息阅读本文

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

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

变量位置=[
[Chinnai'，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'）{
缩放：10，
中心：新google.maps.LatLng（13.0810,80.2740），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
风险值信息='了解更多详情
“；
变量myOptions={
内容：boxText
，disableAutoPan:false
，最大宽度：0
，pixelOffset:new google.maps.Size（-10,0）
，zIndex:null
，boxStyle:{
背景：“url（'popup.png'）不重复”
，宽度：“346px”
}
，closeBoxMargin:“22px 29px 2px 2px”
，closeBoxURL:“images/close.png”
，infoBoxClearance:newgoogle.maps.Size（1,1）
，isHidden:错
，窗格：“浮动窗格”
，enableEventPropagation:false
};
var ib=新信息框（myOptions）；
google.maps.event.addListener（标记，'click'，（函数（标记，i）{
返回函数（）{
ib.setContent（“
”+位置[i][0]+”
了解更多信息，
'+>）；
ib.open（地图、标记）；
}
})（marker，i））；
}