信息框谷歌地图答案

【问题标题】：Infobox Google maps信息框谷歌地图
【发布时间】：2013-04-29 02:21:46
【问题描述】：

我需要为每个信息框添加自定义标记，我还需要信息框显示 onclick 我该怎么做？

希望有人可以提供帮助，我是自定义谷歌地图的新手。

这里是网站的链接http://voycomiendo.com/index2.html

这是我的代码：

<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;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 latlng = new google.maps.LatLng(32.64761401204607, -115.45244693756104);

    var myMapOptions = {
         zoom: 13
        ,center: latlng
        ,mapTypeId: google.maps.MapTypeId.ROADMAP
        ,streetViewControl: true
    };
    var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
// namn
var name=[];
name.push('Test 1');
name.push('Test 2');

// positioner
var position=[];
position.push(new google.maps.LatLng(32.65256435736722,-115.47300338745117));
position.push(new google.maps.LatLng(32.65592465459084, -115.44429302215576));
position.push(new google.maps.LatLng(32.63012300670739, -115.48686504364014));


// infoboxes
var infobox = [];
infobox.push("<div>Hello 1</div>");
infobox.push("<div>Hello 2</div>");
infobox.push("<div>Hello 3</div>");

for (i = 0; i < position.length; i += 1) {
// Call function
createMarkers(position[i], infobox[i], name[i]);
}

function createMarkers(position,content,name) {

    var marker = new google.maps.Marker({
        map: theMap,
        draggable: false,
        position: position,
        visible: true,
        title: name

    });

    var boxText = document.createElement("div");
    boxText.style.cssText = "background: yellow; width: 300px; height: 70px; padding: 5px;";
    boxText.innerHTML = content;

    var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-37, -120)
        ,zIndex: null
        ,boxStyle: { 
            background: "url('tipbox.gif') no-repeat"
            ,opacity: 1
            ,width: "300px"
         }
        ,closeBoxMargin: "5px 5px 5px 5px"
        ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
    };

    google.maps.event.addListener(marker, "click", function (e) {
        ib.open(theMap, this);
    });

    var ib = new InfoBox(myOptions);
    ib.open(theMap, marker);

    }

}
</script>

<title>Ejemplo de Infobox</title>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width: 100%; height: 400px"></div>
    <p>`enter code here`
    Ejemplo haber si funciona
</body>

</html>

【问题讨论】：

标签： google-maps google-maps-markers infobox

【解决方案1】：

查看此示例以获取自定义标记，这是放置自定义标记的好方法

http://www.geocodezip.com/v3_markers_infowindows.html

【讨论】：