Google maps 带有样式的google地图标记信息窗口_Google Maps_Styles_Onload_Infowindow

Google maps 带有样式的google地图标记信息窗口

google-maps

Google maps 带有样式的google地图标记信息窗口,google-maps,styles,onload,infowindow,Google Maps,Styles,Onload,Infowindow,我尝试制作一张有很多标记的地图，每个标记都有自己的信息窗口。我希望infowidow显示onload，因为有很多标记，所以原始infowindow将阻止其他标记，所以我希望infowindow的样式与中的顶部一样，但当我尝试这样做时，每个infowindow都有相同的内容。请告知，谢谢这是第一个链接的代码 <!DOCTYPE html> <html> <head> <style> img[src*="iws3.png"]

我尝试制作一张有很多标记的地图，每个标记都有自己的信息窗口。我希望infowidow显示onload，因为有很多标记，所以原始infowindow将阻止其他标记，所以我希望infowindow的样式与中的顶部一样，但当我尝试这样做时，每个infowindow都有相同的内容。请告知，谢谢

这是第一个链接的代码

<!DOCTYPE html>
<html>
<head>
    <style>
        img[src*="iws3.png"] {
            display: none;
        }
        .infobox-wrapper {
            display:none;
        }
        #infobox{
            border:2px solid black;
            margin-top: 8px;
            background:#fff;
            color:#111;
            font-family:Arial, Helvetica, sans-serif;
            font-size:12px;
            font-weight : bold;
            padding: .5em 1em;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            text-shadow:0 -1px #000000;
            -webkit-box-shadow: 0 0  8px #000;
            box-shadow: 0 0 8px #000;
        }

        </style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
function initialize() {
    var loc, map, marker, infobox;

    loc = new google.maps.LatLng(-33.890542, 151.274856);

    map = new google.maps.Map(document.getElementById("map"), {
         zoom: 12,
         center: loc,
         mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    marker = new google.maps.Marker({
        map: map,
        position: loc,
        visible: true
    });

    infobox = new InfoBox({
         content: document.getElementById("infobox"),
         disableAutoPan: false,
         maxWidth: 80,
         pixelOffset: new google.maps.Size(-40, -70),
         zIndex: null,
         boxStyle: {
            background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
            opacity: 0.5,
            width: "80px"
        },
        closeBoxMargin: "12px 4px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1)
    });

    google.maps.event.addListener(marker, 'click', function() {
        infobox.open(map, this);
        map.panTo(loc);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<title>Creating and Using an InfoBox</title>
</head>

<body>
<div id="map" style="width: 100%; height: 300px"></div>
<br>

InfoBox as an easily customizable replacement for an InfoWindow. Click on the marker to see the infobox generated with custom html &amp; css.
<div class="infobox-wrapper">
    <div class='infobox' id='infobox'>
        contents.
    </div>
</div>

  <!--script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script-->
          <style>

            /*div{
width:150px;
height:100px;
}*/
            </style>
  <div id="map1" style="width: 1000px; height: 1000px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 1],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 5]
    ];

    var map = new google.maps.Map(document.getElementById('map1'), {
      zoom: 10,
      //center: new google.maps.LatLng(-33.92, 151.25),
      center: new google.maps.LatLng(-33.950198, 151.259302),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      /*google.maps.event.addListener(marker, 'click', (function(marker, i) {  //incase you want to show onclick event remove comment  
        return function() {
        */

        var infowindow = new google.maps.InfoWindow({ maxWidth: 200 }); // and comment this line
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        /*}
      })

      (marker, i));
       */
    }

  </script>
</body>
</html>


img[src*=“iws3.png”]{
显示：无；
}
.信息盒包装{
显示：无；
}
#信息箱{
边框：2件纯黑；
边缘顶部：8px；
背景：#fff；
颜色：#111；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
字体大小：粗体；
填充物：5em 1em；
-webkit边界半径：2px；
-moz边界半径：2px；
边界半径：2px；
文本阴影：0-1px#000000；
-网络工具包盒阴影：0 0 8px#000；
盒影：0 0 8px#000；
}
函数初始化（）{
var loc、地图、标记、信息框；
loc=新的google.maps.LatLng（-33.890542151.274856）；
map=new google.maps.map（document.getElementById（“map”）{
缩放：12，
中心：loc，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
marker=新的google.maps.marker({
地图：地图，
位置：loc，
可见：正确
});
infobox=新的infobox({
内容：document.getElementById（“infobox”），
disableAutoPan:错，
最大宽度：80，
pixelOffset:new google.maps.Size（-40，-70），
zIndex:null，
箱式：{
背景：“url（'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif“）不重复”，
不透明度：0.5，
宽度：“80px”
},
closeBoxMargin：“12px 4px 2px 2px”，
closeBoxURL:“http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance:new google.maps.Size（1,1）
});
google.maps.event.addListener（标记'click'，函数（）{
打开（地图，这个）；
潘托地图（loc）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
创建和使用信息框


InfoBox是一个易于定制的InfoWindow替代品。单击标记以查看使用自定义html生成的信息框&；css。
目录
/*div{
宽度：150px；
高度：100px；
}*/
变量位置=[
[Bondi Beach'，-33.890542151.274856，4]，
[Coogee Beach'，-33.923036151.259052，1]，
[Cronulla Beach'，-34.028249151.157507,3]，
[‘曼利海滩’，-33.80010128657071151.28747820854187，2]，
[‘马鲁布拉海滩’，-33.950198151.259302，5]
];
var map=new google.maps.map（document.getElementById（'map1'）{
缩放：10，
//中心：新谷歌地图LatLng（-33.92151.25），
中心：新google.maps.LatLng（-33.950198151.259302），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i


这是第二个链接
    <!DOCTYPE html>
<html>
<head>
    <style>
        img[src*="iws3.png"] {
            display: none;
        }
        .infobox-wrapper {
            display:none;
        }
        .infobox{
            border:2px solid black;
            margin-top: 8px;
            background:#fff;
            color:#111;
            font-family:Arial, Helvetica, sans-serif;
            font-size:12px;
            font-weight : bold;
            padding: .5em 1em;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            text-shadow:0 -1px #000000;
            -webkit-box-shadow: 0 0  8px #000;
            box-shadow: 0 0 8px #000;
        }

        </style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
function initialize() {
    var loc, map, marker, infobox;

    loc = new google.maps.LatLng(-33.890542, 151.274856);

    map = new google.maps.Map(document.getElementById("map"), {
         zoom: 12,
         center: loc,
         mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    marker = new google.maps.Marker({
        map: map,
        position: loc,
        visible: true
    });

    infobox = new InfoBox({
         content: document.getElementById("infobox"),
         disableAutoPan: false,
         maxWidth: 80,
         pixelOffset: new google.maps.Size(-40, -70),
         zIndex: null,
         boxStyle: {
            background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
            opacity: 0.5,
            width: "80px"
        },
        closeBoxMargin: "12px 4px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1)
    });

    google.maps.event.addListener(marker, 'click', function() {
        infobox.open(map, this);
        map.panTo(loc);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<title>Creating and Using an InfoBox</title>
</head>

<body>
<div id="map" style="width: 100%; height: 300px"></div>
<br>

InfoBox as an easily customizable replacement for an InfoWindow. Click on the marker to see the infobox generated with custom html &amp; css.
<div class="infobox-wrapper">
    <div class='infobox' id='infobox'>
        content
    </div>
    <div class='infobox' id='infobox0'>
        content1
    </div>
    <div class='infobox' id='infobox1'>
        content2
    </div>
    <div class='infobox' id='infobox2'>
        content3
    </div>
    <div class='infobox' id='infobox3'>
        content4
    </div>
    <div class='infobox' id='infobox4'>
        content5
    </div>
</div>

  <!--script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script-->
          <style>

            /*div{
width:150px;
height:100px;
}*/
            </style>
  <div id="map1" style="width: 1000px; height: 1000px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 1],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 5]
    ];

    var map = new google.maps.Map(document.getElementById('map1'), {
      zoom: 10,
      //center: new google.maps.LatLng(-33.92, 151.25),
      center: new google.maps.LatLng(-33.950198, 151.259302),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      /*google.maps.event.addListener(marker, 'click', (function(marker, i) {  //incase you want to show onclick event remove comment  
        return function() {
        */

       infobox = new InfoBox({
         content: document.getElementById("infobox"+i),
         disableAutoPan: false,
         maxWidth: 80,
         pixelOffset: new google.maps.Size(-40, -70),
         zIndex: null,
         boxStyle: {
            background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
            opacity: 0.75,
            width: "80px"
        },
        closeBoxMargin: "12px 4px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1)
    });

    google.maps.event.addListener(marker, 'click', function() {
        infobox.open(map, this);
        map.panTo(center);
    });
     infowindow.open(map, marker);
    }

  </script>
</body>
</html>


img[src*=“iws3.png”]{
显示：无；
}
.信息盒包装{
显示：无；
}
.信息箱{
边框：2件纯黑；
边缘顶部：8px；
背景：#fff；
颜色：#111；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
字体大小：粗体；
填充物：5em 1em；
-webkit边界半径：2px；
-moz边界半径：2px；
边界半径：2px；
文本阴影：0-1px#000000；
-网络工具包盒阴影：0 0 8px#000；
盒影：0 0 8px#000；
}
函数初始化（）{
var loc、地图、标记、信息框；
loc=新的google.maps.LatLng（-33.890542151.274856）；
map=new google.maps.map（document.getElementById（“map”）{
缩放：12，
中心：loc，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
marker=新的google.maps.marker({
地图：地图，
位置：loc，
可见：正确
});
infobox=新的infobox({
内容：document.getElementById（“infobox”），
disableAutoPan:错，
最大宽度：80，
pixelOffset:new google.maps.Size（-40，-70），
zIndex:null，
箱式：{
背景：“url（'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif“）不重复”，
不透明度：0.5，
宽度：“80px”
},
closeBoxMargin：“12px 4px 2px 2px”，
closeBoxURL:“http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance:new google.maps.Size（1,1）
});
google.maps.event.addListener（标记'click'，函数（）{
打开（地图，这个）；
潘托地图（loc）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
创建和使用信息框


InfoBox是一个易于定制的InfoWindow替代品。单击标记以查看使用自定义html生成的信息框&；css。
内容
内容