Solved

How to replace info window with a custom window in Google maps API (btw v2)? I need a narrower popup info window!

Posted on 2010-09-14
4
870 Views
Last Modified: 2013-11-10
Hi,

How do I modify goole maps API openInfoWindowHtml to use cutom infobox as I want narrower width on the info window?

Using google maps api I want to be able to make the default pop-up info window narrower - but can't decrease the default width.

I have stumbled upon infobox.js
(http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html)

My original code refreneces an xml document to create and populate the markers, and was adapted from http://econym.org.uk/gmap/tooltips2.htm

Can anyone help modify my code so I can use a custom width for my info window.?
Thanks .

FYI this is kinf of a repost as I had no luck with this under the CSS zone!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>



    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=**************" type="text/javascript"></script>



<STYLE type="text/css">



       html, BODY { background: black;

       text-align:center;

       padding:0;

       margin:0;

	   height: 100%;

}

    </STYLE>

<style type="text/css">







#pic

{

	position:absolute;

	font-family:Verdana;

	font-size:12px;

	color:#FFFFFF;

	top:393px;

	left:216px;

	width:188px;

	z-index: 98;

}



#card

{

	position:absolute;

	font-family:Verdana;

	font-size:12px;

	color:#FFFFFF;

	top:194px;

	left:395px;

	width:190px;

	z-index: 100;

}



#whitebox

{

	position:absolute;

	left:289px;

	top:142px;

	margin:0;

	padding:0;

	z-index:50;

	width:184px;

	text-align: left;

}





#map

{

	position:absolute;

	left:89px;

	top:142px;

	width:400px;

	height: 350px;

	z-index:50;

}

#side_bar

{

	position:absolute;

	font-family:Verdana;

	font-style:bold;

	text-align:left;

	font-size:11px;

	color:#000000;

	top:153px;

	left:508px;

	width:200px;

	height:340px;

	z-index: 102;

}

#cont

{

	font-family:Verdana;

	text-align:left;

	font-size:11px;

	color:#000000;

	width:150px;

	height:120px;

	z-index: 102;

}

#firstpopup

{

	font-family:Verdana;

	text-align:left;

	font-size:11px;

	color:#000000;

	width:150px;

	height:120px;

	z-index: 102;

}

</style>





</head>

<body onunload="GUnload()">







<div id="side_bar"></div>



           <div id="map"></div>

      

                

    

  

    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 

      However, it seems JavaScript is either disabled or not supported by your browser. 

      To view Google Maps, enable JavaScript by changing your browser options, and then 

      try again.

</noscript>





    <script type="text/javascript">

    //<![CDATA[

var WINDOW_HTML = '<div id="firstpopup"><a href="../rapid/"><img src="../images/logos/rapid.jpg" border="0"/><br/><b>Rapid Pictures Ltd</b><br>Post Production</a></div>';



    if (GBrowserIsCompatible()) {

      // this variable will collect the html which will eventualkly be placed in the side_bar

      var side_bar_html = "";

    

      // arrays to hold copies of the markers and html used by the side_bar

      // because the function closure trick doesnt work there

      var gmarkers = [];

      var htmls = [];

      var i = 0;



      

      // === Create an associative array of GIcons() ===

      var gicons = [];

      var gicons = [];

      gicons["icon0"] = new GIcon(G_DEFAULT_ICON, "../images/marker.png");

      gicons["rapid"] = new GIcon(G_DEFAULT_ICON, "../images/mapicons/rapid.png");

      gicons["jasmine"] = new GIcon(G_DEFAULT_ICON, "../images/mapicons/jasmine.png");

      gicons["renezio"] = new GIcon(G_DEFAULT_ICON, "../images/mapicons/renezio.png");

      gicons["thegreenroom"] = new GIcon(G_DEFAULT_ICON, "../images/mapicons/thegreenroom.png");

      gicons["kwest"] = new GIcon(G_DEFAULT_ICON, "../images/mapicons/kwest.png");

      gicons["ginglik"] = new GIcon(G_DEFAULT_ICON, "../images/mapicons/ginglik.png");

      gicons["thestingingnettle"] = new GIcon(G_DEFAULT_ICON, "../images/mapicons/thestingingnettle.png");

      gicons["thehappinesscentre"] = new GIcon(G_DEFAULT_ICON, "../images/mapicons/thehappinesscentre.png");

	  gicons["vesbar"] = new GIcon(G_DEFAULT_ICON, "../images/mapicons/vesbar.png");

	  gicons["caferouge"] = new GIcon(G_DEFAULT_ICON, "../images/mapicons/cafe.png");

	  gicons["brookgreenhotel"] = new GIcon(G_DEFAULT_ICON, "../images/mapicons/brookgreenhotel.png");

	  gicons["pizzaexpress"] = new GIcon(G_DEFAULT_ICON, "../images/mapicons/pizzaexpress.png");

	  



      // A function to create the marker and set up the event window

      function createMarker(point,name,html,icontype) {

        // === create a marker with the requested icon ===

        var marker = new GMarker(point, gicons[icontype]);

        GEvent.addListener(marker, "click", function() {

          marker.openInfoWindowHtml(html);

        });

        // save the info we need to use later for the side_bar

        gmarkers[i] = marker;

        htmls[i] = html;

        // add a line to the side_bar html

        side_bar_html += '<a href="javascript:myclick(' + i + ')"><img src="../images/logos/'+ icontype + '.jpg" width="30px" border="0"/><b>' + name + '</b><\/a><small><small><br/><br/></small></small>';

        i++;

        return marker;

      }





      // This function picks up the click and opens the corresponding info window

      function myclick(i) {

        gmarkers[i].openInfoWindowHtml(htmls[i]);

      }





      // create the map

      var map = new GMap2(document.getElementById("map"));

      map.addControl(new GLargeMapControl());

      map.addControl(new GMapTypeControl());

      map.setCenter(new GLatLng(51.502678, -0.224341), 15);

	  map.openInfoWindow(map.getCenter(),WINDOW_HTML);





      // Read the data from xml document

      var request = GXmlHttp.create();

      request.open("GET", 'friends.xml', true);

      request.onreadystatechange = function() {

        if (request.readyState == 4) {

          var xmlDoc = GXml.parse(request.responseText);

          // obtain the array of markers and loop through it

          var markers = xmlDoc.documentElement.getElementsByTagName("marker");

          

          for (var i = 0; i < markers.length; i++) {

            // obtain the attribues of each marker

            var lat = parseFloat(markers[i].getAttribute("lat"));

            var lng = parseFloat(markers[i].getAttribute("lng"));

            var point = new GLatLng(lat,lng);

            var html = markers[i].getAttribute("html");

            var label = markers[i].getAttribute("label");

            // === read the icontype attribute ===

            var icontype = markers[i].getAttribute("icontype");

            // === create the marker, passing the icontype string ===

            var marker = createMarker(point,label,'<div id="cont"><a href="../'+ icontype + '/"><img src="../images/logos/'+ icontype + '.jpg" border="0"/><br/>'+html+'</a></div>',icontype);

            map.addOverlay(marker);

          }

          // put the assembled side_bar_html contents into the side_bar div

          document.getElementById("side_bar").innerHTML = side_bar_html;

        }

      }

      request.send(null);

    }



    else {

      alert("Sorry, the Google Maps API is not compatible with this browser");

    }



    //]]>

    </script>

  







</body>

</html>

Open in new window

0
Comment
Question by:rapidpictures
  • 2
4 Comments
 
LVL 16

Expert Comment

by:hankknight
ID: 33839687
0
 
LVL 16

Accepted Solution

by:
hankknight earned 500 total points
ID: 33839871
By the way, it looks like your info window is already the minimum width allowed.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39457815
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now