Posted by tinem on July 9, 2010 at 11:31am
On this site http://googlemapsapi.tinemuller.dk/node/1 I have made this directions renderer and copied the code from here http://gmaps-samples-v3.googlecode.com/svn/trunk/drivingdirections/direc.... I clean up a lot of the code and made external css and javascript so now it's validate.
BUT I still don't know enough how to do it the drupalway so is what I have done ok or if not can we help each other making this to the community? My plan is in the future to make a lot of such examples to use with Drupal and link to it from this site.
<?php
drupal_set_html_head('<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>');
drupal_set_html_head('<link rel="stylesheet" href="/sites/all/maps/css/directions_renderer.css" type="text/css" />');
?>
<div id="side-container">
<ul>
<li class="dir-label">From:</li>
<li><input id="from-input" type="text" value="345 Spear St, San Francisco, CA"/>
<br />Write your own start address here</li>
<li class="dir-label">To:</li>
<li><input id="to-input" type="text" value="1600 Amphitheatre Pkwy, Mountain View, CA"/>
<br />Write your own end address here<br /><br /></li>
</ul>
<div>
<select onchange="Demo.getDirections();" id="travel-mode-input">
<option value="driving" selected="selected">By car</option>
<option value="bicycling">Bicycling</option>
<option value="walking">Walking</option>
</select>
<select onchange="Demo.getDirections();" id="unit-input">
<option value="imperial" selected="selected">Imperial</option>
<option value="metric">Metric</option>
</select>
<input onclick="Demo.getDirections();" type="button" value="Go!"/>
</div>
<div id="dir-container"></div>
</div>
<div id="map-container"></div>
<!-- add a link to maps.google.com set the link href attribute to an empty string -->
<div><a href="" id="googleMapLink">See these directions on maps.google.com</a></div>
<script type="text/javascript" src="/sites/all/maps/js/directions_renderer.js"></script>And notice that when you code it for v3 you don't need a key and can use this code on all your domains. :-)<(b>
Comments
Extra service StreetView and print map from maps.google.com
Just want to mentioned if you have not discovered it yourself that I have made extra service so StreetView is also included in the code. Just pull the little yellow man into the map and when you are done click on the tick in top right to close it again.
And also included the link "See these directions on maps.google.com" which make it possible for you to print the map and a lot more.
No one can tell my how to do it the drupalway?
Or tell me which chapter in which book I need to study for making such, please? I'm so eager to learn and do it the right/drupal way but think it's hard to understand even that I have books, videos and tutorials. :-(
Maybe you all are on holiday. :-)
Does this
Does this help?
http://www.missingubercartmanual.com/The-Basics-of-using-Java-Script-in-...
Made my FIRST module but still need help and testing, please?
Thanks for the info. I looked some more in phpdrupaldevelopment and have now made my first module but would like to get feedback as I think I still need to do something?
http://googlemapsapi.tinemuller.dk/node/3
googlemap.module
<?php
// $Id$
/
* @file
* Googlemap test.
*/
/
* Implementation of hook_init().
*/
function googlemap_init() {
drupal_set_html_head('<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>');
drupal_add_js(drupal_get_path('module', 'googlemap') .'/googlemap.js');
drupal_add_css(drupal_get_path('module', 'googlemap') .'/googlemap.css');
}
And on the page itself I now only have:
<div id="side-container">
<ul>
<li class="dir-label">From:</li>
<li><input id="from-input" type="text" value="345 Spear St, San Francisco, CA"/>
<br />Write your own start address here</li>
<li class="dir-label">To:</li>
<li><input id="to-input" type="text" value="1600 Amphitheatre Pkwy, Mountain View, CA"/>
<br />Write your own end address here<br /><br /></li>
</ul>
<div>
<select onchange="Demo.getDirections();" id="travel-mode-input">
<option value="driving" selected="selected">By car</option>
<option value="bicycling">Bicycling</option>
<option value="walking">Walking</option>
</select>
<select onchange="Demo.getDirections();" id="unit-input">
<option value="imperial" selected="selected">Imperial</option>
<option value="metric">Metric</option>
</select>
<input onclick="Demo.getDirections();" type="button" value="Go!"/>
</div>
<div id="dir-container"></div>
</div>
<div id="map-container"></div>
<!-- add a link to maps.google.com set the link href attribute to an empty string -->
<div><a href="" id="googleMapLink">See these directions on maps.google.com</a></div>
There are a few things that
There are a few things that could be improved here.
Thanks for your reply. I just
Thanks for your reply. I just love Google Maps API and thought it would be good learning curve for me to make a module using this. Later I can maybe make more advanced modules for maps.
And if a company have departments all over the world they could use this for each department with it's own map. But some of the code need to be changed before. For instance if you just write an end address and lets the start address be free.
Coordinates for showing the map on the correct place should then be choosed when you make the site. This way it can be used inside drupal also showing StreetView and only have to move from the site if you want to print out the map and some more. Do you understand what I'm trying to explain, please?
Hi, Could you explain how I
Hi,
Could you explain how I could get this working on my site please? I want to add a very simple distance checker on my site and this would be perfect!
Many thanks, Joe
Where is your site and what
Where is your site and what exactly do you want this site to do?
Hi Tinem, Thanks for your
Hi Tinem,
Thanks for your reply. I have it nearly working as planned here: http://www.devon-logs.co.uk/delivery
The company need a distance calculator because they offer free delivery within 25 miles, and want the customer to be able to check how far they are from the main office.
Really what I like to achieve is simply a box for entering a postcode and a submit button - and have the rest hidden (including the from address - set to the office location). Then the distance is displayed upon checking.
But this isnt really necesary and it works ok for now so it's not at all important for me to develop any further, but something I might have a go at when I have some free time.
Many thanks, Joe
GeoField and AddressField modules
I realize that it has been 4 years since this thread was started, but it appears as if the time were ripe for a module that gathers the Google Driving Directions.
The GeoField https://drupal.org/project/geofield and Address Field https://drupal.org/project/addressfield modules can be responsible for holding the spatial data and it seems like the Google Driving Directions API could be used fairly well in combination with them. For example, if multiple locations (Addresses and GEO POINTS) were saved in a single node, then a complimentary module could fetch the driving directions data from Google and save the returned information to a new field.
Such an approach is not an simple task, but it is an interesting concept and it does not appear as if anyone else has started this approach yet.
Senior Programmer
APA-OTS Originaltext-Service GmbH