6
मैं एक गूगल मानचित्र है कि ठीक काम करता है, लेकिन मैं सिर्फ यह बदलाव करने इतनी है कि जब एक मार्कर क्लिक किया जाता जरूरत है और एक जानकारी विंडो खुल जाता है, मुझे लगता है कि मार्कर चाहते हैं (और मानचित्र) स्क्रीन पर केंद्र करने के लिए। ऐसा इसलिए है कि जानकारी विंडो प्रत्यक्ष फोकस है।गूगल मानचित्र v3 - केंद्र एक infowindow जब खोला
यदि यह मदद करता है, मैं infowindows बनाने के लिए Infobox.js उपयोग कर रहा हूँ। मैं ऑफसेट
pixelOffset का उपयोग कर की कोशिश की है: नई google.maps.Size (-97, -20)
लेकिन इस infowindow या नक्शे को केंद्र में नहीं होती जब आप मार्कर खोलने के लिए और यह सटीक नहीं है।
मेरे कोड (live example):
var ib = new InfoBox();
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(52.204872,0.120163),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
google.maps.event.addListener(map, "click", function() { ib.close() });
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var sites = [
['The Frontroom', 52.202977,0.138938, 1, '<p>The Frontroom <br/>23-25 Gwydir Street, Cambridge, CB1 2LG <br/>01223 305 600 <br/> <a href="http://www.frontroomcambridge.com/">Website</a></p>'],
['Fitzwilliam Museum',52.199678,0.119931, 2, '<p>Fitzwilliam Museum <br/>Trumpington St, Cambridge, CB2 1RB <br/>01223 332900 <br/> <a href="http://www.fitzmuseum.cam.ac.uk/">Website</a></p>'],
['Wysing Arts centre', 52.182077,-0.06977, 3, '<p>Wysing Arts Centre <br/>Fox Rd, Cambridge <br/>CB23 2TX <br/>01954 718881 <br/> <a href="http://www.wysingartscentre.org/">Website</a></p>']
];
function createMarker(site, map){
var siteLatLng = new google.maps.LatLng(site[1], site[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: site[0],
zIndex: site[3],
html: site[4],
icon: "http://visualartscambridge.org/wp-content/uploads/2013/03/map-dot.png"
});
var boxText = document.createElement("div");
boxText.style.cssText = "margin-top: -200px; height:200px; background: white; padding: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;";
boxText.innerHTML = marker.html;
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-97, -20)
,zIndex: null
,boxStyle: {
background: "url('http://visualartscambridge.org/wp-content/uploads/2013/03/box-marker.png') no-repeat"
,width: "195px"
}
,closeBoxMargin: "-185px 12px 200px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(0, 250)
,isHidden: false
,alignBottom: true
,pane: "floatPane"
,enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function (e) {
ib.close();
ib.setOptions(myOptions);
ib.open(map, this);
});
return marker;
}
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
createMarker(markers[i], map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);