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
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,
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.
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 :
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
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
$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
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 ?
https://www.jbfelix.be
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
Drupal behaviours should also be accounted for, but aren't necessary to make it work in its most basic form.
Drupal 7 working version
------------------
Ciril Sreedhar
Sreyas IT Solutions
Server Administration | Web Designing | Web Programming
Could you tell me how to use your code?
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.
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:
Ændrew Rininsland
News Developer and polynerd
http://www.aendrew.com
For Drupal 8 use below code
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,
Hope it helps.
Thanks!!
mapMarkers are undefined
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?
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)
https://www.jbfelix.be
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!
+1
Subscribe +1
AJAX <---
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?