Can Map Points in CGGoogleMaps2 be links to content?

[CapereSpiritum]

Having managed to get CGGM2 to deliver a map and adding a number of Map Points, I'm trying to add an href link to each marker that will link to Company Directory entry.

Has anyone else done this or can point me in the right direction.
I've applied

Code: Select all

{get_template_vars}

to the page to see what's available.
The only item that looks promising is

Code: Select all

->_dynamic_points (array) = [   ]

My temp website address is http://teessiders.artworknetwork.co.uk/ 'Template Vars displayed now.

If I can add a link, I pretty sure I know how to apply a CoDir entry ID to the href by ensuring that the Map Point is named identically to the CoDir entry.

It's apply the href that has me confused.
I'm using the following:
PHP V 5.6.30
CMSMS Version 2.1.6

Installed Modules
AdminSearch 1.0.2
Album 1.11
CGExtensions 1.55.5
CGGoogleMaps2 1.1.1
CGSimpleSmarty 2.1.6
CGSmartImage 1.21.9
CMSContentManager 1.1.4
CMSMailer 6.2.14
Captcha 0.5.5
CompanyDirectory 1.23.5
DesignManager 1.1.1
FileManager 1.5.2
FormBuilder 0.8.1.6
JQueryTools 1.4.0.1
MicroTiny 2.0.3
ModuleManager 2.0.5
Navigator 1.0.3
News 2.50.6
Search 1.50.2

[calguy1000]

Typically you do this from within CompanyDirectory... one of the summary views.

Something like (syntax and variables are not precise, I didn't look it up).

Code: Select all

{foreach $entries as $entry}
    {cggm2_add_dynpoint name=$entry->name address=$entry->address ...}
{/foreach}
{CGGoogleMaps2}

[calguy1000]

You can also put HTML into the infowindow bubble so that users can click on a link and go to a URL.

If you want them to directly click on a map point and be redirected to a URL then you will need to build some javascript for that. Using the CompanyDirectory summary view as a starting point.

[CapereSpiritum]

Thanks very much CalGuy

I'm off to see the client in a short while, so I will apply your summary view option as I'm pretty sure I can do that.

Writing javascript will have to be second option as I know I'll struggle with it.

My strengths are CSS, Design, Layouts etc. JS and JQ leave me some way down the ladder at present.

[CapereSpiritum]

Hi CalGuy

I've struggled to add the Info Window when hovering over a map icon.
I tried desc=$entry->company_name and description=$entry->company_name, but I get a message that these parameters have been dropped.

I'm desperate to finish this site asap as I open my Pub on Monday.
Can you point out to me what I'm missing?

Thanks
Simon

[calguy1000]

I just looked at your site quickly.

You have more than one problem to resolve before you worry about CompanyDirectory. Resolve your HTML validation and javascript problems first.

Then get one location 'hard coded' to work with the smarty tag.

Then get the foreach loop with CD to work.

[CapereSpiritum]

Hi CalGuy
I've resolved the HTML validation. Thanks hadn't seen that.
Noticed the the Google Maps API key was called twice. Now sorted.

To be honest I'm fumbling in the dark trying to get a tooltip to work when a marker is hovered over.

I've looked at the map_tooltip.js in the CGGM2 lib/js folder.
Does this mean I created a div in the foreach loop? If so what do I call the class.
I don't know if I name the class then add the class name to the js below.

Code: Select all

// map tooltip class
// credits: http://medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps-javascript-api-v3/

// create a constructor
function Tooltip(options) {
  // Now initialize all properties.
  this.marker_ = options.marker;
  this.content_ = options.content;
  this.map_ = options.marker.get('map');
  this.cssClass_ = options.cssClass||null;
  this.div_ = null;
  this.setMap(this.map_);
  var me = this;

  google.maps.event.addListener(me.marker_, 'mouseover', function() { me.show(); });
  google.maps.event.addListener(me.marker_, 'mouseout', function() { me.hide(); });
}

Tooltip.prototype = new google.maps.OverlayView();

Tooltip.prototype.onAdd = function() {
  var div = document.createElement('DIV');
  div.style.position = "absolute";
  div.style.visibility = "hidden";
  if(this.cssClass_) div.className += " "+this.cssClass_;
  div.innerHTML = this.content_;
  this.div_ = div;
  var panes = this.getPanes();
  panes.floatPane.appendChild(this.div_);
}

Tooltip.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var ne = overlayProjection.fromLatLngToDivPixel(this.marker_.getPosition());
  var div = this.div_;
  div.style.left = ne.x + 'px';
  div.style.top = ne.y + 'px';
}

Tooltip.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
}

// Note that the visibility property must be a string enclosed in quotes
Tooltip.prototype.hide = function() {
  if (this.div_) this.div_.style.visibility = "hidden";
}

Tooltip.prototype.show = function() {
  if (this.div_) this.div_.style.visibility = "visible";
}
;

[calguy1000]

I just tested. Tooltips work fine.

I used a single marker, and cggm2_add_dynpoint.

The only issue I had was that the map tooltips functionality uses the class 'tooltip' as does bootstrap so I had to come up with some css styling for the tooltips in the map.

Hint:
Use your javascript console, view the 'elements' and search for the word 'tooltip' then you will find the div for specific tooltips and you can then play with the styling etc. so that they display.

I had to set:
.tooltip {
opacity: initial;
}

[CapereSpiritum]

Hi CalGuy

I know I'm getting close. I don't have a javascript console, so I'm simply viewing source code.

Would you be so kind as to post a link to your working test so that I can see where I'm off target?

For now, I've disabled all but one CD entry and the hard coded marker to simplify things.

Thanks
Simon

[Jo Morg]

I don't have a javascript console, so I'm simply viewing source code.

mmmm...
https://www.freecodecamp.org/challenges ... pt-console
https://www.google.com/search?q=javascript+console