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
920 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Date on a table 16 35
links not working 2 27
replacing inline javascript with jquery 4 46
Make Float not to Wrap 10 20
Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

733 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