?
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
Medium Priority
?
967 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 2000 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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

762 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