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
940 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…

724 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