0
我需要添加自定義標記到每個信息框,我也需要信息框來顯示onclick我該如何做到這一點?Infobox谷歌地圖
希望有人可以幫助,我新自定義谷歌地圖。
這裏是鏈接到該網站http://voycomiendo.com/index2.html
這裏是我的代碼:
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&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.63, -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>