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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
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 set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

770 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