Member Avatar for stevenpetersen

How do i style or put html into a map.openInfoWindow (the bubble on google map).
The reason is because i would like to include a picture and style the text.

The code below is just a normal Java API Map that i use. The key has been removed for the customer.

//<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(34.4419, -122.1419), 13);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key="
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.246147,-121.957769),10);
      var point = new GPoint(-121.9573, 37.2464);
var marker = new GMarker(point);
map.addOverlay(marker);

map.openInfoWindow(map.getCenter(),
                             document.createTextNode("here is what i want to style"));
                             
      map.addControl(new GMapTypeControl());
      map.addControl(new GLargeMapControl());
      map.addControl(new GOverviewMapControl());
}
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 700px; height: 300px">
</div>

Again thank you for your help

  • 2 Contributors
  • 6 Replies
  • 603 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by pritaeas

Recommended Answers

All 6 Replies

Member Avatar for stevenpetersen

is there anyone who can edit a google map on this site or does the daniweb just not like me.

Member Avatar for pritaeas

This is part of my google script. Hope this helps:

var _map;
var _geocoder;
var _marker;
var _objLocation = null;
var _address = null;

var popupWindows = [];
var gMarkers = [];
var markerCount = 0;

var gAddress = [];
var gDescription = [];

function addItem(pLat, pLong, pTitle, pAddress, pLogo, pDescr) {
    var _mapObject = document.getElementById("googlemap");
    if (_mapObject == null)
        return;

    if (_map == null) {
        _map = new GMap2(_mapObject);
        _map.setCenter(new GLatLng(52.25, 5.4), 9);
        _map.addControl(new GSmallMapControl());
        _map.addControl(new GMapTypeControl());
        _map.checkResize();
    }
    point = new GLatLng(pLat, pLong);

    var customIcon = new GIcon(G_DEFAULT_ICON);
    customIcon.image = "images/marker.png";
    markerOptions = { icon: customIcon, title: pTitle };

    _marker = new GMarker(point, markerOptions);
    if (_marker != null) {
        var param = markerCount;
        GEvent.addListener(_marker, "click", function() {
            showPopup(param);
        });

        gMarkers[markerCount] = _marker;
        _map.addOverlay(_marker);

        gAddress[markerCount] = pAddress;
        gDescription[markerCount] = pDescr;

        popupWindows[markerCount] =
		        '<div><table><tr><td colspan="2" style="height: 80px;">';

        if (pLogo == '') {
            popupWindows[markerCount] += '&nbsp;';
        }
        else {
            popupWindows[markerCount] += '<img src="' + pLogo + '"/>';
        }
		        
        popupWindows[markerCount] +=
		        '</td></tr>' +
		        '<tr><td style="width: 150px; border-right: 1px solid #ddd; padding-right: 10px; height: auto;" valign="top">' +
		        gAddress[markerCount] +
		        '</td><td style="padding-left: 10px;" valign="top">' +
		        gDescription[markerCount] +
		        '</td></tr></table></div>';

        markerCount++;
    }
}

function showPopup(marker) {
    try {
        gMarkers[marker].openInfoWindowHtml(popupWindows[marker]);
    }
    catch (e) { }
}
Member Avatar for stevenpetersen

pritaeas , thank for replying to this! i did not think anyone was going going to reply to it.

Is thee any way you can break the code above down for me so i know how to properly insall and edit it. This code you sent me looks alot different and i do not want to be installing it wrong in projects. I am not to shear on how to install it as well. I also have another google code i am trying to understand in a form if you want to take a crack at it. API new GLatLng help

Thank you for your time and help,
Steven Petersen

Member Avatar for pritaeas

I'll create a separate working project for you tomorrow. Just a little more patience.

I'm not quite sure what you mean in the other thread. Do you want to add several points to the map ?

Member Avatar for stevenpetersen

Do you want to add several points to the map ?

Yes, but from a list on a txt. or anotherpage.

Untitled.png 7.8 KB
Member Avatar for pritaeas

Hope this will explain things.

A copy of the zip (as rar) can be found here:
http://www.pritaeas.net/public/daniweb/google_map.rar

GoogleMap.zip (3.25 KB)
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.