19
Tôi hiện đang làm việc với Google Maps và mọi thứ hoạt động tốt ngay bây giờ. Nhưng tôi muốn thay đổi kiểu dáng của InfoWindow. Tôi đã nghiên cứu nhưng chưa tìm thấy bất kỳ điều gì hữu ích để giúp tôi hiểu InfoWindow (thậm chí không phải Tài liệu API.)Thông tin tạo kiểuWindow với API Google Maps
Vì vậy; làm thế nào để thay đổi kiểu dáng như màu sắc, nền, đường viền và vv của hộp InfoWindow trong bản đồ của tôi?
Xin cảm ơn trước.
Heres mã của tôi:
<!DOCTYPE html>
<head>
<title>Google Maps Example</title>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 font-family: Helvetica;}
#map_canvas { height: 100% }
.InfoWindow {
background: #000;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
$(document).ready(function() { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(59.9149, 10.72974);
var myOptions = {
zoom: 14,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var sites = [
['Mount Evans', 59.934615,10.743392, 4, '<div class="InfoWindow"><b>This is Mount Evans.</b></div>'],
['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];
var image = new google.maps.MarkerImage(
'http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-8c4eb8/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/bar.png',
new google.maps.Size(30,37)
);
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
zIndex: sites[3],
html: sites[4],
icon: image
});
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Edit: Nó không giống như nó có thể để tạo kiểu InfoWindow (chỉ cần đầu vào). Tuy nhiên, Infobox có thể làm được điều này.
Bạn có thể muốn ghé thăm [Link] (http://stackoverflow.com/questions/3610884/changing-background-color-in-google-map-infowindow) – Ankit
@Ankit Cảm ơn bạn. – sjarmenitt
bạn cũng có thể làm điều đó với [** InfoBubble **] (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html) quá (cùng một trang web). – johntrepreneur