DMXzone Google Maps Support Product Page

QUESTIONS

Answered

Formatting the Info Window

karl hemmings

Asked 08 Jul 2014 15:13:17

has this question

I also have this question

08 Jul 2014 15:13:17 karl hemmings posted:

I have read through the help and support section for this Extension... but have not found a satisfactory reply to questions relating to the formatting of the information (description) window.

Here's the style I've added to the page:

<style type="text/css">
.gmap_marker {
font:"Arial Black", Gadget, sans-serif;
font-size:14px;
color:#690;
}
</style>

Here's the code on the page calling the dynamic data:

<script type="text/javascript">
  // <![CDATA[
 jQuery(document).ready(
   function()
     {
       jQuery("#map1").dmxGoogleMaps(
         {"width": 800, "height": 1200, "zoom": 7, "markers": [<
%  While NOT AllVenuesRS.EOF
%> {"latitude": <%=(AllVenuesRS.Fields.Item("longitude").Value)%>, "longitude": <%=(AllVenuesRS.Fields.Item("latitude").Value)%>, "html": "<%=(AllVenuesRS.Fields.Item("vname").Value)%><br/><%=(AllVenuesRS.Fields.Item("firstname").Value)%>&nbsp;<%=(AllVenuesRS.Fields.Item("lastname").Value)%>", "title": "<%=(AllVenuesRS.Fields.Item("vname").Value)%>"}, <
%    AllVenuesRS.MoveNext()
  Wend 
%>]}
       );
     }
 );
  // ]]>
</script>

If you visit this page and click on the markers, you will see that some windows display the info fine whilst others display the text broken up and with scroll bars.

Any ideas on how to resolve this problem? It seems that without the ability to format the description window the extension is somewhat limited.

Here's the link to view the page... click the markers to see the problem:

www.therapytrainingschool.com/map.asp

Replies

Teodor Kuduschiev

Replied 11 Jul 2014 13:10:21

11 Jul 2014 13:10:21 Teodor Kuduschiev replied:

Hello,
Please add the following to the css you already added:

overflow: hidden;
white-space: nowrap;

karl hemmings

Replied 13 Jul 2014 16:41:10

13 Jul 2014 16:41:10 karl hemmings replied:

Fantastic.

Thanks for your prompt reply... it worked

karl hemmings

Replied 14 Jul 2014 08:07:26

14 Jul 2014 08:07:26 karl hemmings replied:

Rather than using longitude + latitude, I would also like to use only post code from the dynamic database.

However, when I use only post code the clickable markers no longer show the info window.

The markers are placed correctly, the mouse over functionality works, but the onclick event does not open the info window.

Here is the code for the whole page for your review:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="I am omitting this for security reasons" -->
<
%Dim AllVenuesRS
Dim AllVenuesRS_cmd
Dim AllVenuesRS_numRows

Set AllVenuesRS_cmd = Server.CreateObject ("ADODB.Command")
AllVenuesRS_cmd.ActiveConnection = MM_test123_STRING
AllVenuesRS_cmd.CommandText = "SELECT venues.longitude, venues.latitude, venues.vname, teachers.firstname, teachers.lastname, venues.vpostcode FROM venues INNER JOIN teachers ON venues.teacherID = teachers.ID WHERE venues.approved = 'Yes' AND venues.showit = 'Yes' ORDER BY venues.vname" 
AllVenuesRS_cmd.Prepared = true

Set AllVenuesRS = AllVenuesRS_cmd.Execute
AllVenuesRS_numRows = 0
%>
<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styles/dmxGoogleMaps.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxGoogleMaps.js"></script>
<style type="text/css">
.gmap_marker {
font:"Arial Black", Gadget, sans-serif;
font-size:14px;
color:#690;
overflow:hidden;
white-space:nowrap;
}



</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top">Teacher Venue Locations
      <div class="dmxGoogleMaps" id="map1" style="width:800px;height:1200px;">
</div>
<script type="text/javascript">
  // <![CDATA[
 jQuery(document).ready(
   function()
     {
       jQuery("#map1").dmxGoogleMaps(
         {"width": 800, "height": 1200, "zoom": 7, "markers": [<
%  While NOT AllVenuesRS.EOF
%> {"address": "<%=(AllVenuesRS.Fields.Item("vpostcode").Value)%>", "html": {"sstr": "<%=(AllVenuesRS.Fields.Item("vname").Value)%><br/><%=(AllVenuesRS.Fields.Item("firstname").Value)%>&nbsp;<%=(AllVenuesRS.Fields.Item("lastname").Value)%>", "estr": {}}, "title": "<%=(AllVenuesRS.Fields.Item("vname").Value)%>"}, <
%    AllVenuesRS.MoveNext()
  Wend 
%>]}
       );
     }
 );
  // ]]>
</script></td>
  </tr>
</table>
</body>
</html>
<
%AllVenuesRS.Close()
Set AllVenuesRS = Nothing
%>

DMXzone Google Maps Support Product Page

QUESTIONS

Formatting the Info Window

Replies

Reply to this topic