Posted by beckyjohnson on October 19, 2009 at 6:29pm
I would like to try and make an interactive menu using drupal and gmap that involves using check boxes. If you check a box, the markers show up on the map... this site is an example of the functionality I am trying to reproduce: http://www.wimaxmaps.org.
I'm not sure where I would build the check box form right now. would I use the menu system or what?
Has anyone tried anything like this?
Becky
Comments
Gmap Extra Markers
Becky,
I did something like this at Rareplanet.org. You can see the map here:
http://rareplanet.org/en/campaigns
The checkboxes on the right can be used to filter the markers on the map.
I released the code to make the main map as the module Gmap Extra Markers.
http://drupal.org/project/gmap_extra_markers
It is only Drupal 5 right now but I plan to make it work for Drupal 6 also. The module allows you to add markers from multiple views on one map.
The filtering is done in a custom block. I am not at the computer with that code now so I can't recall exactly how I did it.
You should be able to do filtering with or without the module above. I couldn't find a module that does it so it would require some custom programming. Basically when GMap makes a map it makes a Javascript array of marker objects. If you use the GMap view plugin you can add the view fields to the objects by setting the "fatmarkers" in the GMap Macro setting(i am pretty sure). You could add categories or other fields to the marker objects this way.
Then you could make javascript that fires when click the checkboxes. The Javascript would then go through the marker array and show or hide markers based on the view fields(terms,fields,node id,etc). You can show/hide markers using the Google Maps Api and the GMarker objects. You can see the docs here:
http://code.google.com/apis/maps/documentation/reference.html#GMarker
Hope this points you in the right direction.
Ted
Core developer
2ted: Thanks, if you can
2ted: Thanks, if you can create module gmap_extra_markers for 6.х drupal, it would be great!!!!!!
Thank you for the great
Thank you for the great example tedbow. It is good to know that this is possible in drupal. Right now, the thing freaking me out about this is the javascript. Thank you for the "roadmap". I'm going to give it my best shot.
Also, to clarify, is the GMap Macro setting in views or do you mean the GMap Macro setting for the module itself.
Becky
Becky, How I did in Drupal 5
Becky,
How I did in Drupal 5 was the "argument handling code" section of the view. You would place the code:
$view->GMap_macro = '[GMap |behavior=+fatmarkers]';
Not sure if this would still work in Drupal 6 Gmap.
One thing to do might be to make a Gmap View in 6 and add fields/terms you want. Then view the source code of the page it makes and look to see if those fields are in the marker objects.
ted
Core developer
I've been studying your
I've been studying your approach to GMaps more. I can't decide whether to use your approach to GMAPs in Drupal Or Tine's method, as shown below, so I'm trying both.
I made some views in gmap and trying to follow your advice concerning making the check boxes that do the filtering. I was wondering if you could clarify a few things for me.
In the following code you typed to me: $view->GMap_macro = '[GMap |behavior=+fatmarkers]'; what does +fatmarkers mean?
Also you suggested I view the source code of a views page to see if those fields are in the marker object. How do I know if they are in the marker object? I viewed my source and this is what I found:
jQuery.extend(true, Drupal, { settings: { "gmap": { "auto1map": { "width": "700px", "height": "480px", "zoom": 2, "maxzoom": "14", "controltype": "Large", "align": "None", "maptype": "Map", "mtc": "standard", "baselayers": { "Map": 1, "Hybrid": 1, "Physical": 1 }, "styles": { "line_default": [ "0000ff", "5", "45", "", "" ], "poly_default": [ "000000", "3", "25", "ff0000", "45" ] }, "line_colors": [ "#00cc00", "#ff0000", "#0000ff" ], "behavior": { "locpick": false, "nodrag": 0, "nokeyboard": 1, "nomousezoom": 1, "nocontzoom": 0, "autozoom": 1, "dynmarkers": 0, "overview": 0, "collapsehack": 0, "scale": 1, "extramarkerevents": false, "clickableshapes": false }, "markermode": "1", "id": "auto1map", "markers": [ { "latitude": -38.27, "longitude": 144.14, "markername": "small blue", "offset": 0, "text": "\x3cdiv class=\"gmap-popup\"\x3e \n \x3cdiv class=\"views-field-title\"\x3e\n \x3clabel class=\"views-label-title\"\x3e\n Title:\n \x3c/label\x3e\n \x3cspan class=\"field-content\"\x3e\x3ca href=\"/content/sp-ausnet\" title=\"SP AusNet\" alt=\"SP AusNet\"\x3eSP AusNet\x3c/a\x3e\x3c/span\x3e\n \x3c/div\x3e\n \n \x3cdiv class=\"views-field-field-dep-type-value\"\x3e\n \x3clabel class=\"views-label-field-dep-type-value\"\x3e\n Deployment Type:\n \x3c/label\x3e\n \x3cspan class=\"field-content\"\x3e802.16e\x3c/span\x3e\n \x3c/div\x3e\n \n \x3cdiv class=\"views-field-field-frequency2-value\"\x3e\n \x3clabel class=\"views-label-field-frequency2-value\"\x3e\n Frequency:\n \x3c/label\x3e\n \x3cdivMost of this makes no sense to me. So what is the clue here that says the field is in the marker object?
Thanks for any feedback,
Becky
I figured out how to print my
I figured out how to print my arrays out onto the page : http://experiment.wimaxmaps.org/frequency/2.3
I can't click on map object to see what's going on inside of it though. hmmm.
Becky
I have NOT used any map modules
I have made something similar here http://www.tinemuller.dk/drupal/Copenhagen_map. Not so many toilets yet because it's only test. From InfoWindow you can click "Here" and you will see more info from only this toilet and you can you can get back to the map clicking "See the toilet on Copenhagen Map" - I have NOT used any map modules but it's working the way I want it and that's the most important for me.
This is a good example too
This is a good example too tinem. If you didn't use any modules, how did you get the check boxes there?
becky
I have used several years to
I have used several years to learn Google Maps API and you can look at this links http://groups.google.dk/group/Google-Maps-API/web?hl=da and a good forum http://groups.google.dk/group/Google-Maps-API/topics?hl=da. If you are interested I could explain some more but if you are only going to use it for a couple of markers you don't need database and can just paste the code into a page and of course remember to get you own key. Click on my site on the different maps and if you have questions post back again. How do the site look like which you are working on?
Thank you for the links. I
Thank you for the links. I will look at them. Right now, we are trying to replicate this site: http://www.wimaxmaps.org in drupal. we had this site made by a contractor and now we want to move it in house and on to drupal. There is a lot of data.
Becky
OK then it will be the same
OK then it will be the same domain when it's imported to Drupal. I have been looking at this site before but the problem is that if you have a screen as me which only can see 1024x768 and not higher resolution you can't read the info to the left and that's not good but we are still a lot of people looking at sites with this resolution.
Yeah, you're right. This is
Yeah, you're right. This is hopefully something we will be adjusting when we move the site over....
So about your earlier post, did you just mean that I could build this site using the google API, and then just paste the code into a page and it would work?
Are you at least using the GMAP module?
How did your link the js files to the page that you need? I always wonder about how to make js files more efficient on drupal. Did you just put them in the .info file and have them load on every page?
Becky
Try looking at this
Try looking at this discussion http://groups.drupal.org/node/25999 where I explain how I first made a map from a database OUTSIDE Drupal and later discovered how to do it INSIDE Drupal. If you need more info I will explain further to you. And NO I don't use ANY map module at all.
A Vote for the GMap Module
Just to give my opinion I think there a lot of advantages to using the GMap module rather than doing this with complete custom programming. The module works great and it takes care of all of the Google Map API integration for you. Also the fact that it is already integrated with the Views Module makes it very powerful.
The only custom programming that would need to be done for your needs would be the filtering of markers with checkboxes. This probably something that would be great have as a separate module eventually.
Ted
Core developer
It was easier to right a custom module
I tried doing a proximity searching map using location and gmap and I found that the module has so little documentation that I could not figure out how to make it work. I ended up writing a custom module using the Google maps tutorial. I put the JavaScript and CSS in separate files and used location CCK for storing location information in my custom content type. I used standard hooks and theme functions to make it all work. It did not use check boxes but that could be copied from the tutorial tinem posted and do the same thing. It was my first custom module and it did not prove too difficult. My assessment of the Gmap module is it tries to be too all encompassing and has become unnecessarily complex. Without better documentation and tutorials it is hard figure out how to use it. It was easier for me to learn how to write a simple custom module using the Pro Drupal Development book as a guide.
@twall411 - Congratulation
@twall411 - Congratulation with your first Module. I'm impressed. I also have Pro Drupal Development which I'm reading at the moment but still can't make such a module but surely will do it in the future. I have just read the book Using Drupal and I think these TWO books is a must for a serios Drupal developer to buy.
Maybe this is a better link http://code.google.com/intl/da/apis/maps/documentation/articles.html showing dynamic PHP/MySQL with Google Maps API.
I am working my way though
I am working my way though Beginning Google Maps Applications with php and Ajax right now. It is pretty helpful. I am getting a better handle on google maps. The only thing is, I was wondering tinem, once you build the map with the map api, how do you get it to sync up with your nodes? How do you make your plot points into nodes as well?
That's what we want to do. When a user clicks into a window bubble on the map and clicks on the title in the bubble, we want it to take them to that point's node, which will have more information on it than is shown in the bubble......
(and thanks for the links)
Becky
You can also import your info
You can also import your info as this old tutorial explain http://awebfactory.com.ar/node/302 and if you as I only use CCK fields you will have ALL this info in ONE table from your Content type and then use this for showing your map on a page from which you link to your javascript and css file.
http://www.tinemuller.dk/drupal/Copenhagen_map - this is what I have on this page:
<?php
include $_SERVER['DOCUMENT_ROOT'] . '/apikey.php';
if(isset($_GET['nid'])){
$nid_url_value=(int) $_GET['nid'];
echo '<script type="text/javascript">var requestedNid='.$nid_url_value.';</script>';
}
?>
<script src="http://maps.google.com/maps?file=api&v=2&key=<?= $apikey ?>" type="text/javascript"></script>
<script src="sites/all/copenhagen_map/map_functions.js" type="text/javascript"></script>
<link href="sites/all/copenhagen_map/toiletter.css" rel="stylesheet" type="text/css" />
<body onload="load()" onunload="GUnload()">
<div id="wrapper">
<div id="box"> <a href="http://www.kk.dk/"><img src="sites/all/copenhagen_map/images/koebenhavn_logo.gif" alt="" width="181" height="62" /></a> Handicap toilet:<img src="sites/all/copenhagen_map/images/handicap2.gif" alt="" width="23" height="32" id="Handicap" />
<input type="checkbox" id="Handicapbox" onclick="boxclick(this,'Handicap')" />
Unisex toilet:<img src="sites/all/copenhagen_map/images/unisex2.gif" alt="" width="23" height="32" id="unisex" />
<input type="checkbox" id="Unisexbox" onclick="boxclick(this,'Unisex')" />
Pissoir:<img src="sites/all/copenhagen_map/images/pissoir2.gif" alt="" width="23" height="32" id="pissoir" />
<input type="checkbox" id="Pissoirbox" onclick="boxclick(this,'Pissoir')" />
<a href="http://www.tinemuller.dk/PROJEKT/toiletter/"><span style="color:#FFF; text-decoration: underline;">Projekt</span></a></div>
<div id="MYmap"></div>
<div id="side_bar"></div>
</div>
From looking at your above
From looking at your above code, did you put your api key into a separate php file?
Becky
Putting api key in separate file
Yes I did. Doing it so you don't need to find you api key everytime you make a Google Maps inside your domain. But you have to make this page filters php.
In the root I put this file apikey.php which include:
<?php
$apikey = "ABQIAAAAmYYoLeRyazVGDeFwMH_5chRBa9hFh1JQE70w75ZW5bLNFA531BSqFdAlOuedN5j5p0Nzmek2tUeZkA";
?>
If you don't want to do it this way you can just past your api key like this:
<script src=" http://maps.google.com/?file=api&v=2.x&key=ABQIAAAAmYYoLeRyazVGD...type="text/javascript"></script>
Instead of this:
<script src="http://maps.google.com/maps?file=api&v=2&key=<?= $apikey ?>" type="text/javascript"></script>I have another question. Did
I have another question. Did you put the above code into the body of your node or did you actually use a page.tpl.php file?
I have pasted code into the node and it kind of works. It thinks that my api is wrong and won't load so it is trying to do something. I don't know how I can get it to see that I have already input my code into the gmap module.
Becky
Start with an New Content type
I started with a new content type and gave it a locations cck field and fields for any other data that you want to associate with the node. This also provides automatic geolocation. You can either enter an address or zip code and have it automatically generate the Lat and Long. Or you can specify the Lat and Long manually or by pushing a pin in a map. This becomes your database for map. You can pass the Node ID to your JavaScript and it can be used to generate an anchor tag for the HTML that you create for your information bubbles linking back to the node. You can then also use your new content type for other views such as printable lists of your locations.
I was reading about this in
I was reading about this in my google maps book, well except that the Javascript was passing the info into an XML file. I already used the Location module to put a bunch of data into my site, using the node import/export module so I would like to be able to have my map read that data, but once that is done, I would like to add new pins to the map by pushing a pin in the map too.
I don't have a lot of js or php skills. I understand it somewhat and I understand what I"m reading in my book. So, if I push a pin on the map to make a new point, can I get it to go into the right table in my database, (location module tables I presume?) and also, what would js that passes the node id into the javascript look like?
Becky
If you do it like I have
If you do it like I have explained and look at the tutorial http://awebfactory.com.ar/node/302 about CRUD you will get a link http://www.tinemuller.dk/drupal/node/add/copenhagen but YOU can't see it because you don't have access to make new info. You can find your coordinates from this http://www.mapchannels.com/GeocoderSimple.aspx and for Denmark http://www.findvej.dk/ and from both you can move your marker to the correct place and then copy and paste it into the fields you made for your Content type as lat and lng - you can see my fields here http://www.tinemuller.dk/drupal/view/list/copenhagen. ALL the links in the top for CRUD is made as Views.
Sweet! I have done this. I
Sweet! I have done this. I kind of did it earlier, before I read this post and ended up using GMAP/location modules to take advantage of it's address and lat/lang fields. sadly though, I have to write a custom php file to get support for the Cote de Ivore and the French West Indies. :P
This project is kind of a trial run so, if I have to re-import the data again using a different module or a hand made content type then, it's probably not going to be a huge bother. For example, I was wondering if I should use Google Maps Embed because it gives me a lat and lang field and prints the map on the individual node already, with out custom themeing. And it's simpler. Esp, if I let Google API do all the heavy lifting.
Becky
Congratulation to you but let
Congratulation to you but let us see what you have made, please? :-)
Hello Tinem: This is what I
Hello Tinem:
This is what I have so far: http://experiment.wimaxmaps.org
Click on the menu items to see links to maps I made in views. (I just needed to make some provisional maps until I get this api thing sorted)
So here is what I have to figure out:
How to sync up nodes and map points.
Hook into my drupal database for the info that has already been imported (I have an idea about this).
Make the check box interface an figure out the js to go along with it (picking out subsets of data to show on the map and then re-set it)
I am already using the gmap and location module so I can skip any coding I might need for geocoding and skip putting my api key into a php file since these modules handle that.
But what I would also like to do is somehow allow for people to add their own markers to the map by clicking on a point and having an info window open with a node form. I think this is very possible. My Gmap API book explains how to do it with html but I'm not sure how I would get a drupal node form into a info window.
See this page for an example: http://www.googlemapsbook.com/chapter3/Final/ try clicking on the page and see how the form pops up.
That's all for now.
Becky
If your are going to use my
If your are going to use my way of doing this maps I will explain to you later how I managed to get dynamic link back to the map and open the window for each toilet.
Is MY way of doing this OK or should it be the Drupal way?
My way of doing this is NOT the Drupal way and I can't at the moment see if it will bring me problems in the future so maybe you Becky should stick with the Drupal way and NOT do it like I do. I already asked if there could be problems doing it MY way in this post of 21 July 2009 http://groups.drupal.org/node/24449 but got no respond. So I'm unsure. :-(
So if there are some pro drupal develophers here in this forum can you answer this question, please?
Ah... I understand but, is it
Ah... I understand but, is it possible that I could look at your code anyway, tinem?
The thing is, using the existing gmap and location module, I don't know how to add in the check boxes and I don't know how to get the balloons to color code according to taxonomy term like it does on the node location page. When I make a view using gmap, it only lets me have one color marker, not color markers depending on taxonomy.
Becky
It has been possible to see
It has been possible to see all the time - http://www.tinemuller.dk/drupal/sites/all/copenhagen_map/map_functions.js - I link to this file from the earlier code mentioned.
ahhhh I see. I did not
ahhhh I see. I did not realize that.
Thank you. I am looking into other drupal best practices possibilities now too. If I find anything good out, I'll let you know.
Becky
Tinem, could you please
Tinem, could you please point out the part in the map_functions js that tells it to grab the drupal nodes? I have been studying it but I can't find it.....
Becky
http://www.tinemuller.dk/drup
http://www.tinemuller.dk/drupal/div/Copenhagen_Map.pdf
Oh gosh! Thank you for
Oh gosh! Thank you for sharing your code. I am studying this pdf as I type. Thank you!. Also, on another note, if you ever decide to use the GMAP module, they have been making improvements on things. one reason why I didn't want to use it was that the views didn't allow for color coded markers but it looks like they are fixing it: http://drupal.org/node/205944
Becky
Thank you for explaining your
Thank you for explaining your code to me. I appreciate it. I was wondering, how did you get so good at php? I am pretty bad at it and still foundering.
Becky
I'm not good at PHP but have
I'm not good at PHP but have been struggling for years trying to understand Google Maps API and can now figure out how to copy/paste both PHP and Javascript. And I have also paid a programmer for some help to get where I'm now. But figuring out to use Drupal and Google Maps API together is my own profit which I'm really proud about now I just need to make this example maybe using a Module but can't see if it change something but have been told that this is the right way/Drupal way.
I still need to figure our how to make this maps for 98 different cities the best way but don't know where to ask for help. Until now no one have a solution for me. I can get it to work but not the best way I'm sure.
Where can I describe my project and ask for help?
I think you should try out
I think you should try out the Gmap module (http://drupal.org/project/gmap) and the location module together and see how that works. Then I would try and post on the GMAP module queue to see if that gets you anything. I think these are good modules but they have limitations and often projects like this need customization, which is why we are both posting to this group, I guess.
Becky
Hey Tinem, I have made some
Hey Tinem,
I have made some progress on my map. They are now color coded by deployment (although there is no map key yet). I used the release candidate 1 of Gmap and it gets some basic things done well. See: http://experiment.wimaxmaps.org/frequency/2.3 Now I think I will try custom coding the check boxes and stuff.....we'll see how that works out.
Becky
How are you progressing?
Hi Becky,
I was wondering what is your progress on this. I want to do something similar and I would be very interested in seeing your results.
Mike
I couldn't find modules for
I couldn't find modules for my site so I made it without map modules and it looks like it's functioning but you have to know how to use this tutorial http://code.google.com/intl/da/apis/maps/articles/phpsqlsearch.html and how to make changes to make it fit with Drupal.
My testsite can be seen here http://www.tinemuller.dk/test_drupal/