How to customize infoWindow in google map

rAfridi
rAfridi used Ask the Experts™
on
Hello Sir

I want to redraw infoWindow in google map. I am not  removing by default window .please find the attacment file to understand  my problem

Thanks
Aasim Afridi
 ifoWindow problem
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2010

Commented:

Author

Commented:
Hello sir

I saw your solution But i dont want this .You are customizing font-family , font-color,background color etc.But i am talking about infoWindow  rather than font for this clarify see the attachment file .
Please help me ....

Thanks and Regards
Aasim afridi
 
infowindow.jpg
Top Expert 2010

Commented:
Read carefully that page.
Look at this image (same link I posted before):

http://maps.gstatic.com/intl/en_ALL/mapfiles/iw3.png

You need to create one that resembles Your wanted style.

Quote from other post:

For the outer square You should create image like the one I gave You and  then override the css of google with Your css and pinpoint it to divs  that are responsible for rounded corners or that spike.

And You can use this (i didnt test it):

http://www.geo2web.com/2010/04/20/infobox-1-0-highly-customizable-information-window-for-google-maps-api-v3/
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

This is a tricky work. Begin with some code and post the progress here so I can be able to help You.

Regards
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hello Sir

I am agree your solution .I have two doubts .One is you gave me one url of image link that is                           " http://maps.gstatic.com/intl/en_ALL/mapfiles/iw3.png " .I am not getting of this means .And another is customize infoWindow. Because my data is coming from database and i am using json code so my file is became very complex and when i insert your code which you suggest me then it gives error in map and show blank .So i am confusing where should i place that code .How to change  this window  .So please help me Please find the attachment of my map.js file and suggest me.

Thanks and Regardes
Aasim afridi
map.js

Author

Commented:
Hello sir

I got you concept and i divided into three things:

1. Remove infoWindow
2. Initialize new infoWindow
3. Customized infoWindow

Right?

But i am facing problem to solve this task pleas help me

Thanks and Regards
Top Expert 2010

Commented:
Do You have Your code somewhere online, or can You attach it (not only js, also the page that reference that js file). Cant really know what You are doing in Your code if I dont see it.

Regards

Author

Commented:
Hello sir

Now i am giving you my code

map.js(Java Script file)

update_new.php(Php file data send in to json format)

home.html(Front end file where map is dispalying)

Thanks and Regards
Aasim Afridi
map.js
update-new.php
home.html
Top Expert 2010

Commented:
Ok, thanks. Give me some time and be patient and Ill try to solve this for You.

Regards
Top Expert 2010
Commented:
Create one test page and copy the code below. Its fairly simple to use. You just need to include infobox.js file at the top. Look at this code, try it and ask if You have any further questions. You can see the example live at (my link will last at least 24 hours):

http://www.bosko.rs/ee/infobox/

Basically, its one of the examples I pointed You to check, just a little bit modified.

Regards

<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="infobox.js"></script>
<script type="text/javascript">
	function initialize() {
	
		var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

		var myMapOptions = {
			 zoom: 15
			,center: secheltLoc
			,mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

		
		var marker = new google.maps.Marker({
		  map: theMap
		 ,position: new google.maps.LatLng(49.47216, -123.76307)
		 ,visible: true
		});
		
        var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: orange; padding: 5px;";
        boxText.innerHTML = "Experts-Exchange Example";
		
		var myOptions = {
			 content: boxText
			,disableAutoPan: false
			,maxWidth: 0
			,pixelOffset: new google.maps.Size(-140, 0)			
			,zIndex: null
			,boxStyle: { 
			  background: "url('tipbox.gif') no-repeat"
			  ,opacity: 0.75
			  ,width: "280px"
			 }
			,closeBoxMargin: "10px 2px 2px 2px"
			,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
			,infoBoxClearance: new google.maps.Size(1, 1)
			,isHidden: true
			,pane: "floatPane"
			,enableEventPropagation: false
		};

		var ib = new InfoBox(myOptions);		
		ib.open(theMap, marker);
		
		google.maps.event.addListener(marker, "click", function(e){ 
		   ib.setOptions({isHidden: false});
		   ib.open(theMap,marker);
		});
	}
</script>

</head>
<body onload="initialize()">
	<div id="map_canvas" style="width:100%; height:50%"></div>
	<p>
	This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow.

</body>

</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial