Support/Comments for GoogleMapMarker

4,213 Posts

doze Reply #171, 17 years, 10 months ago

The images are broken because you have this in your main.css:

img {
background:#FAFAFA none repeat scroll 0 0;
border:1px solid #DADADA;
padding:5px;
}

Then there’s a js error about missing maplinks element, add <div id="maplinks"></div> somewhere where the snippet renders links to the markers (you can hide it via CSS if you don’t want it).

Then you are missing & before the openMouseOverMarker parameter in your snippet call.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

1,717 Posts

coroico Reply #172, 17 years, 10 months ago

Thanks Doze. Sorry for the img selector (I hate css >:( ) I didn’t see that.

Just some last things ...
1/ I don’t get any content in the bubble info (no title, no image, no link) and when the bubble info is open the map doesn’t fit with the upper side of the bubble info (no move).
What is wrong ?

My snippet call is

[!GoogleMapMarker? &apiKey=`{{GMapAPIkey}}` &tpl=`googleMapTpl` &startID=`3` &centerPos=`47.9320800, 1.9499134` &defaultZoom=`5` &openMouseOverMarker=`1` &mapTypeControl=`none` &hideOverviewMapByDefault=`0`!]

and the html content (html window of tinyMCE) of my marker (#14 just under #3) is:

<h2>Brehna</h2>
<p><img src="assets/templates/pixelgreen/images/introBrehna.jpg" alt="" width="133" height="100" /><br /><a href="http://www.brehna-semoy.wangba.fr/index.php?id=2&ln=de">
<h4>Hineingegangen in <br />den Standort auf deutsch</h4>
<img src="assets/templates/pixelgreen/images/de.gif" alt="" width="24" height="24" /></a></p>

Any idea ?

4,213 Posts

doze Reply #173, 17 years, 10 months ago

About the auto scrolling of the map, no idea. I haven’t used Google maps much.

For the missing content in your bubble, what GoogleMapMarker version are you using? I’ll refer to the one that I posted in page 6.

The markers are created via Ditto on line 308:

$script .= $modx->runSnippet($dittoName,array('depth' => $descendentDepth, 'sortBy' => $sortBy, 'sortDir' => $sortDir, 'summarize' => 'all', 'displayArchive' => '0', 'tpl' => '@CODE:var point = new GLatLng([+description+]); var marker = createMarker(point, \'[+title:slashandstrip+]\', \'[+content:slashandstrip+]\'); map.addOverlay(marker);', 'parents' => $startID, 'showPublishedOnly' => '0'));

From there you see that the template what is used in Ditto is:

@CODE:var point = new GLatLng([+description+]); var marker = createMarker(point, \'[+title:slashandstrip+]\', \'[+content:slashandstrip+]\'); map.addOverlay(marker);

And the output for you in JS code is:

var point = new GLatLng(51.5572900, 12.2141260);
var marker = createMarker(point, 'Brehna', '');
map.addOverlay(marker);

So, has Ditto’s [+content+] placeholder changed to something else and you need to replace it with the right placeholder? or if you are using the "slashandstrip" PHx modifier, is it perhaps taking out too much from the content (eg. all of it

)

But I think that you are not using the snippet on page 6, because you have line spacing in your ditto template.. You might want to try that version (remember to create the PHx modifier if you do try it).

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

388 Posts

Terry Reply #174, 17 years, 9 months ago

First of all, I love this snippet/plugin! Thank you!

I wondering if you can help me sort out some formatting of the bubbles.

1. In FF and IE there is lots of extra white space below the text (I used TinyMCE). You can see the box is about twice as large as it needs to be.

2. In IE, when I float an image right, the box is way wider than it needs to be. I have an example with an image floated left and another floated right.

Is there a way to control this?

http://www.terrybarthdesign.com/google-map.html

Thank you!

Terry

www.terrybarthdesign.com

4,213 Posts

doze Reply #175, 17 years, 9 months ago

Unfortunately I don’t have any quick fixes for your issues.. I looked quicke to your html source and you don’t have any extra paragraphs there atleast, so it’s something in the css. Don’t know if it’s your site css that is messing it or if you need to add something.

You could start by creating a page with empty template (with empty, I mean that put the <html><head> etc that the snippet works, but no css styling). Then look if you have the same problems. If you do, try fixing it with additional css styling.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

388 Posts

Terry Reply #176, 17 years, 9 months ago

Doze, thanks for taking a look at this.

When I use Firebug to look at the bubbles, I see the height is specified as an in-line style rather than coming from a style sheet. In the example (below) the height is 222px.

<div style="position: absolute; left: 16px; top: 16px; width: 297px; height: 222px; z-index: 10;">

I assume this is dynamically generated by js since each of the bubbles have their own unique height defined in px.

I don’t know how I could affect this in-line style.

Any ideas?

www.terrybarthdesign.com

388 Posts

Terry Reply #177, 17 years, 9 months ago

Good enough for now.

I played around with the CSS as you suggested and narrowed it down to a few lines that seemed to affect this formatting in the bubbles. Although I’m not sure why, moving the font-size and line-height styles up a level in the html from the individual elements p h1 h3 etc to the div seemed to improve the formatting.

Also it seems I can float an image left and formatting is as expected. However, floating an image right seems to expand the width of the bubble to that of the map and which pushes it off the view of the map.

For now I can live with this.

I appreciate all the help. Thank you!

www.terrybarthdesign.com

388 Posts

Terry Reply #178, 17 years, 8 months ago

I have a new question.

I want to use the map to show the locations of a several venues for an event. I have a document for each venue that provides information about that location. I’m using the content area and several TVs for that information.

Now for the map, I had hoped I could use the same document to populate the map markers rather than create new documents just for the map markers. However, this means I need to call bubble content from some other field besides content.

I played around with the snippet and found I could replace content with the introtext field or even a RTE TV. So far so good. What I would really like to do is to call several TVs that are already used on the document such as venue address, phone, logo. This would enable the marker to be automatically populated when a new venue is added or updated. Using a single field requires the client to update the data in two places.

My php is not so strong so I wasn’t able to figure out to make this work. Is there a way to create tpl file for the bubble content like we use for ditto output?

Thoughts?

www.terrybarthdesign.com

4,213 Posts

doze Reply #179, 17 years, 8 months ago

From the snippet code, you can find the following line:

$script .= $modx->runSnippet($dittoName,array('depth' => $descendentDepth, 'sortBy' => $sortBy, 'sortDir' => $sortDir, 'summarize' => 'all', 'displayArchive' => '0', 'tpl' => '@CODE:var point = new GLatLng([+description+]); var marker = createMarker(point, \'[+title:slashandstrip+]\', \'[+content:slashandstrip+]\'); map.addOverlay(marker);', 'parents' => $startID, 'showPublishedOnly' => '0'));

That is used to "print" the marker js code. You can replace those [+description+], [+title:slashandstrip+] and [+content:slashandstrip+] ditto placeholders with any tv name. That is just Ditto’s template.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

388 Posts

Terry Reply #180, 17 years, 8 months ago

Hey Doze, thanks

I had tried that actually. I have been able to use a different TV successfully, however, when I tried to use more than one tv, I got blank bubbles. I’d like to use the document title, TVs for street address, telephone, etc. I suspect it’s a syntax problem.

Glad to know I’m on the right track. I’ll take another swing at this later today.

Thank you.

www.terrybarthdesign.com