2013-04-29 157 views
0

我需要添加自定義標記到每個信息框,我也需要信息框來顯示onclick我該如何做到這一點?Infobox谷歌地圖

希望有人可以幫助,我新自定義谷歌地圖。

這裏是鏈接到該網站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.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> 

回答