Last updated October 3, 2010. Created by DanielWashbrook on October 3, 2010.
Log in to edit this page.
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:
<?php
$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
Using an Attachment
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.
Works fine with mouseover too
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.
--
WeBla.fr
mouseover events
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?
Subscribing, Greetings,
Subscribing,
Greetings, Martijn
Subscribing, Greetings,
Deleting post.
Oh my code!! I'm soooo late but...
... 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
--
WeBla.fr
Piece of code missing?
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
<?php$viewname = "gmapview"; $output = views_embed_view($viewname, $display_id = 'page_2'); print $output;
?>
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 27 44 38
Awesomeness juice
Thanks for your contribution - it saved me a lot of headache!
For the sake of completeness to make a link "onmousehover"able you should:
<a>element and have the views-field-title class) to an existing gmap view (as an attachment)Not working in Drupal 7
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 ?
http://www.moove.be
http://www.drupality.be
http://www.drupality.org
Changes in javascript in Drupal 7
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.
Drupal 7 working version
(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
Drupal 7 with API v3
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
Drupal developer by day, data journalist by nightData journalist by day, Drupal developer by night
http://www.aendrew.com
It works!
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 : ]
How ?
Could you explain how to make it working with filters ? (proximity in my case)
http://www.moove.be
http://www.drupality.be
http://www.drupality.org
D7 / API V3
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!