Here i am going to tell you that how to create custom infowindow/InfoBox with Google Maps Api V3 .
Here some steps to achieve this.. To use google maps first of all you need to insert google maps API in your code.
Necessary file can be downloaded from here
Now include infobox.js in your code
Now here is a simple map example containing custom infobox
Add above scripts in your page's head tag.
Now initialize the map
That's all now you can view your map with custom InfoWindow.
Here some steps to achieve this.. To use google maps first of all you need to insert google maps API in your code.
Necessary file can be downloaded from here
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true" type="text/javascript"></script>
Now include infobox.js in your code
<script src="infobox.js" type="text/javascript"></script>
Now here is a simple map example containing custom infobox
<script type="text/javascript">var map;function initialize() {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: #999; border-radius:5px; padding: 5px; color:#FFF;";
boxText.innerHTML = "Hello This is a custom styled InfoWindow<br />You Can Design it as you want";
var myOptions1 = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",opacity: 0.85,width: "380px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
}; var ib = new InfoBox(myOptions1); ib.open(map, marker); google.maps.event.addListener(marker, "click", function() {
ib.open(map, marker);
});
}
</script>
Add above scripts in your page's head tag.
Now initialize the map
<body onload="initialize();">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
That's all now you can view your map with custom InfoWindow.
Great stuff :) thanks!
ReplyDelete1 question:
I only want to have 1 open infobox at the time.
How do i close the previous infobox's whn i click a new marker?
nvm :)
Deletegoogle.maps.event.addListener(marker, "click", function () {
$(".infoBox").hide();
ib.open(map, marker);
});
did the trick
Hey flemming your method just hides, when you click on the markers multiple times and try to click on cross button, the previous boxes remain to be present....is there a turn around work for this ?
DeleteBEFORE OPEN YOUR NEW INFOBOX, JUST CALL THIS CODE. infoBox.close(); This will help for you.
DeleteHey flemming your method just hides, when you click on the markers multiple times and try to click on cross button, the previous boxes remain to be present....is there a turn around work for this ?
ReplyDeletei need infobox to connect with database(dynamic)
ReplyDeleteyou must use ajax
Delete