By default the GMap view only allows for a map to be displayed with markers. To display a list with the Map and to allow for interaction between the two, follow these instructions:

First create your GMap page view. Try http://groups.drupal.org/node/19614

Ensure any specifics are added to the Defaults because the next step is to create a second "page" view but style it to display your node list. At some point you will want the "Fields" to be different and the "Path" will also differ. You will have two different pages now, one with a nodes list and one with a GMap that you'll want to combine into a single page.

Part of the difficulty is if you want to filter the results of both based on exposed filters. Add any exposed filters you like, but ensure they are in the Defaults so they apply to both the GMap and the node list and also ensure "Use Ajax" is set to "no".

To combine the two views into one, you must edit a file in the "gmap" module folder called "gmap-view-gmap.tpl.php" and add a call to embed your node list view with your GMap. The call will look something like this:

  $viewname = "gmapview";
  $output = views_embed_view($viewname, $display_id = 'default');
  print $output;

A couple notes, the 'name' variable should be set to the name of your view and the 'display_id' should be either 'default' or the name of your node list page view.

The last step that is a bit complicated is having the link in the node list trigger the "click" event for it's marker. To accomplish this add the following Javascript code to the the view page either through a page.tpl.php or use the drupal_add_js():

<script>
$(document).ready(function(){

	$('.views-field-title a').each(function(i){
	  $(this).bind('click', function(){
	    GEvent.trigger(Drupal.settings.gmap.auto2map.markers[i].marker, "click");
	    return false;
	  });
	});

});
</script>

This script will execute once the page is loaded and bind all the links in each class "views-field-title" (this might be different but I used the "node:title" as my link) to a corresponding marker in the DOM. I think the 'auto2map' might be different in some cases but a look at the DOM should show you what the ID of your map is.

Once completed, a map and node list will be displayed and clicking on the title in the node list will trigger the associated marker.

Comments

supercuts’s picture

This post is good, because I was having trouble figuring out how to connect to the Google Maps API from withing the page. I implemented things a bit differently, which I think is a bit simpler.

Instead of creating two separate pages, I just created one page using gmap view, that had all the proper filters for the locations that I wanted on the map. I then created an attachment, and attached it to the page. The attachment was just styled as a regular html list, and I just put the Field Name as the only field. I customized the output, to display as a link with class 'mapLocationLink'.

Then, you just need to get the javascript to hook into the API, which is shown nicely above. I created a custom js file with the above code, and using the Drupal.behaviors method to have it load after the page loads. You will need to use drupal_add_js like is mentioned above, and add that to the gmap module.

My code was slightly different as a result, but as is pointed out, you will probably need to customize a couple of the names just a bit. Here's mine for reference,

Drupal.behaviors.gmap = function (context) {
    $('a.mapLocationLink').each(function(i){
        $(this).bind('click', function(){
            GEvent.trigger(Drupal.settings.gmap.auto1map.markers[i].marker, "click");
            return false;
        });
    });
}

Thanks for this. Helped me a lot.

cedric_a’s picture

Thanx for this code. I use it with the mouseover events.

I just add an advice, it's a "best practice" to copy the "gmap-view-gmap.tpl.php" in your theme folder before modify it.

lyosef’s picture

How did you do the mouseover? Would you post an example? Also, regarding the code in the post above, how do you add that to the file, is it nested in the standard php tags or just added to the end of the file?

Summit’s picture

Subscribing,
Greetings, Martijn

Summit’s picture

Deleting post.

cedric_a’s picture

... here is the code in my gmap-view-gmap.tpl.php file placed in my theme directory :

<?php
// $Id: gmap-view-gmap.tpl.php,v 1.1 2008/09/17 22:47:10 bdragon Exp $
/**
 * @file gmap-view-gmap.tpl.php
 * Default view template for a gmap.
 *
 * - $map contains a themed map object.
 * - $map_object contains an unthemed map object.
 *
 * @ingroup views_templates
 */
?>
<?php if (!empty($title)) : ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<?php print $map; ?>
<script>

$(document).ready(function(){

	/* Affichage des bulles de la Gmap par mouse over sur les titres des régates de la barre de droite */
	$('.mapSelectors .views-field-title a').each(function(i){
	  $(this).bind('mouseover', function(){
	    GEvent.trigger(Drupal.settings.gmap.auto1map.markers[i].marker, "click");
	    return false;
	  });
	});

});
</script>

And see this page for the working demo (cursor over the titles in the sidebar under "Nos régates") :
http://www.matchetm.com/regates

Sorry for this late reply

designate’s picture

Hi,

Followed the steps as described above but can't get it to work. The map shows with a list of node titles containing a marker [all markers are shown on the map as well] but the titles link to it's full node.

Also, when I try your code since I like the mouseOver option the list of titles is gone. Is there a piece of code missing within your comment? I miss the $viewname = "gmapview"; $output = views_embed_view($viewname, $display_id = 'page_2'); print $output;part to be placed within gmap-view-gmap.tpl.php as mentioned earlier.

Please advice

UPDATE; Got it working with script put in the page.tpl.php file and the other code as an addition too the gmap-view-gmap.tpl.php file. Now looking for solution to have different marker for active marker as mentioned in http://drupal.org/node/1154936.

Designate web development
www.designate.nl
+31 (0)229 708 000

blackspiraldancer’s picture

Thanks for your contribution - it saved me a lot of headache!
For the sake of completeness to make a link "onmousehover"able you should:

  1. paste the script inside the gmap-view-gmap.tpl.php copied from the module directory to the theme dir
  2. add a field to a view as a Node: Title link (so it will be an <a> element and have the views-field-title class) to an existing gmap view (as an attachment)
  3. inside the view, edit the basic parameter "CSS Class" and add "mapSelectors" (the switch you added)
jbfelix’s picture

I try to do it in Drupal 7 but no luck.
here is my page http://dev0.jeunescathos.org/carte-des-groupes
Is this script compatible with D7 ?

clevername’s picture

This tutorial was written for Drupal 6. Remeber to take into account the Drupal 7 javascript changes: http://drupal.org/node/756722

Namely, jQuery functions now have to be written by wrapping them with

(function($) {

  //.. your function here ..



}(jQuery));

Drupal behaviours should also be accounted for, but aren't necessary to make it work in its most basic form.

sreyas’s picture

(function ($) {
	Drupal.behaviors.gmap = {
        attach: function (context, settings) {
                // add actions in each views row. You can change that if you use other views format
		$(' .views-row .views-field-title a').each(function(i){
			var newi = i; // marker[i] start from "0" but .views-row from "1"
          
			$(this).bind('mouseover', function(){
			GEvent.trigger(Drupal.settings.gmap.auto1map.markers[newi].marker, 'mouseover');
			return false;
			});

			$(this).bind('mouseout', function(){
			GEvent.trigger(Drupal.settings.gmap.auto1map.markers[newi].marker, 'mouseout');
			return false;
			});

		});
	}
	};
	
	
})(jQuery);

------------------
Ciril Sreedhar
Sreyas IT Solutions
Server Administration | Web Designing | Web Programming

sagitta’s picture

Hi, i am having the same problem.
I tried to copy your code in to my theme dir gmap.js(the file i created) and add it to my theme by using the theme.info file with no luck. I tried to copy your code in to the gmap-view-gmap.tpl.php file which i copied from the gmap module dir, it didn't work too.
Could you tell me how to use your code exactly, thanks a lot!~ I am using drupal 7.

aendra’s picture

It should be noted that GEvent.trigger is Google Maps API V2 while Gmap has moved onto API V3. The equivalent is google.maps.event.trigger. A D7/v3 version of the above code is as follows:

(function ($) {
  Drupal.behaviors.gmap = {
    attach: function (context, settings) {
      $(document).ready(function(){
        $('a.mapLocationLink').each(function(i){
          $(this).bind('mouseover', function(){
            google.maps.event.trigger(
              Drupal.settings.gmap.auto1map.markers[i].marker, 
              'click'
            );
            return false;
          });
        });
      });
    }
  };
})(jQuery);

Ændrew Rininsland
News Developer and polynerd
http://www.aendrew.com

umeshpatil’s picture

Thanks Andrew, Because of your answer I was able to figure out it in Drupal 8 as well.

Here's the code for Drupal 8,

google.maps.event.trigger(Drupal.geolocation.maps[0].mapMarkers[$(this).index()], 'click');
				return false;

Hope it helps.

Thanks!!

Santhosh-Kumar-Rengasamy’s picture

When i used the exact code for my drupal 8 site with reference of andrew's code for drupal 7,
i get the error: "Uncaught TypeError: Cannot read property 'mapMarkers' of undefined". Even i configured with Google API key.
What should be done to wipe out this error?

meroyx’s picture

I managed to make it work with filters : ] here is my demo http://www.amirm.net/dev/exercise/node-map link might be removed later thanks : ]

jbfelix’s picture

Could you explain how to make it working with filters ? (proximity in my case)

Mr.Far’s picture

Hi has anyone managed to get this working for Drupal 7 with api V3 working? If you have would greatly appreciate a bit of a walk through.
Been at this a while now with no luck!

kossumov’s picture

Subscribe +1

kossumov’s picture

Why do we have to set "Use Ajax" to "no". I wanted to use AJAX for other features. Is there any way to have it working with AJAX enabled?