Implementing multiple geo localization custom functionality WordPress
- SOLVED
Hi, folks...
I found a great tutorial about creating geolocation driving directions :
[[LINK href="http://wp.tutsplus.com/tutorials/creative-coding/use-geo-location-to-give-your-customers-driving-directions/"]]http://wp.tutsplus.com/tutorials/creative-coding/use-geo-location-to-give-your-customers-driving-directions/[[/LINK]]
I'm working in a e-commerce site, where the products for sale are available in different stores, so I need to use this functionality to display different maps, one for each store, so the people can enter their directions and and get their driving directions to each specific store... but the tutorial just teaches how to use it to get to one single adress
I made the script work perfect, but just for one direction... how can I make it function to allow many and different arrive adresses?
I know I need to add some options to the short code, something like this: [wpmap_map l<strong>ocation="3.1234,2.12345"</strong>]
I've tried to modified this original function inside of the map.php code to adapt it... but I think I'm not doing it well, I'm just lost in what to do know. take a look at the original code and to my try:
original:
function wpmap_map(){
/** Styles **/
wp_register_style('wptuts-style', get_template_directory_uri() . '/map/map.css', '', '', false);
wp_enqueue_style ('wptuts-style');
/** Scripts **/
wp_register_script('google-maps', 'http://maps.google.com/maps/api/js?sensor=false');
wp_enqueue_script('google-maps');
wp_register_script('wptuts-custom', get_template_directory_uri() . '/map/map.js', '', '', true);
wp_enqueue_script('wptuts-custom');
$output = sprintf(('<div id="map-container" data-map-infowindow="%s" data-map-zoom="%s"></div>'),
get_option('map_config_infobox'),
get_option('map_config_zoom')
);
return $output;
}
add_shortcode('wpmap_map', 'wpmap_map');
my try:
function wpmap_map($atts){
extract( shortcode_atts( array(
'lat' => 'put the latitud',
'long' => 'put the long',
), $atts ) );
/** Styles **/
wp_register_style('wptuts-style', get_template_directory_uri() . '/map/map.css', '', '', false);
wp_enqueue_style ('wptuts-style');
/** Scripts **/
wp_register_script('google-maps', 'http://maps.google.com/maps/api/js?sensor=false');
wp_enqueue_script('google-maps');
wp_register_script('wptuts-custom', get_template_directory_uri() . '/map/map.js', '', '', true);
wp_enqueue_script('wptuts-custom');
$output = sprintf(('<div id="map-container" data-map-infowindow="%s" data-map-zoom="%s"></div>'),
get_option('map_config_infobox'),
get_option('map_config_zoom')
);
return $output;
}
add_shortcode('wpmap_map', 'wpmap_map');
In few words... I want to be able to use this shortcode [wpmap_map l<strong>ocation="3.1234,2.12345"</strong>] in each store page (I've all ready created the custom post type "stores"), just changin the "3.1234,2.12345" corresponding to the lat/long of each store.
Can anyone, help me to solve this and help me getting working?
you can download the files to see the rest of the code right here: [[LINK href="http://tuts-authors.s3.amazonaws.com/wp.tutsplus.com/Japh/2012/08/01/map.zip"]]http://tuts-authors.s3.amazonaws.com/wp.tutsplus.com/Japh/2012/08/01/map.zip[[/LINK]]
Answers (2)
Hai Bui answers:
You have to modify the "wpmap_directions_input" function instead of "wpmap_map":
function wpmap_directions_input($atts){
extract( shortcode_atts( array(
'location' => get_option('map_config_address'),
), $atts ) );
$output = '<div id="directions">
<p>For Driving Directions, Enter your Address below :</p>
<input id="from-input" type="text" value="" size="20" placeholder="Enter your address here" />
<select onchange="" id="unit-input">
<option value="imperial" selected="selected">Imperial</option>
<option value="metric">Metric</option>
</select>
<a href="#" onclick="WPmap.getDirections(\'manual\'); return false" class="map-button">Get Driving Directions </a>
<br />
<input id="map-config-address" type="hidden" value="' . $location . '"/>
<div id="geo-directions" class="hidden">
<p>Alternatively, you can</p>
<a href="#" onclick="WPmap.getDirections(\'geo\'); return false" class="map-button">Use your Current Location </a>
<span id="native-link"></span>
</div>
</div>
';
return $output;
}
add_shortcode('wpmap_directions_input', 'wpmap_directions_input');
And the shortcodes to use will be:
[wpmap_map]
[wpmap_directions_input location="3.1234,2.12345"]
[wpmap_directions_container]
alejandro Carrillo comments:
Thanks for the quick response, mate...
I made the changes you suggest... but it's not working... cant see any map... tale a look: http://www.sitiosguau.com/santiveri/tiendas/comercial-2/
Hai Bui comments:
Did you copy my code? it's not just the extract part at the top, I also made a change in this line
<input id="map-config-address" type="hidden" value="' . $location . '"/>
alejandro Carrillo comments:
Hi, mate...
I correct that missing line, but still not working... look, I tried in this two different "tiendas" custom post types:
http://www.sitiosguau.com/santiveri/tiendas/tienda-dos/
http://www.sitiosguau.com/santiveri/tiendas/comercial-2/
You think you'll need my admin and ftp info? sending it to you trough message-
(I guess the problem is something related to the info box wich is supossed to collet the lat/long for the main map, but only when you just use one map, thats why I can't use that box (in setting/general at the bottom) and need instead be able to modufy the shortcode to set different directions for each store)
Thanks mate... hope you can still help me
Hai Bui comments:
It's working now. It didn't work because you haven't set a value for "Map Zoom Level", I set it to 10. Please check it.
alejandro Carrillo comments:
yes! it seems like it's working smootly now! let me trie with a few more stores to check it out! Yohooooo!
Arnav Joy answers:
how are you storing lat or long for particular store ?
using this plugin or any thing else?
and to display this map how you use the shortcode?
can you show me the url where you have implemented this?
alejandro Carrillo comments:
Hi, Arnav... no, I'm not using any plugin... just tje file map.php map.css and map.js in my theme folder
I want to put the lat long values in the shortcode, so each time I want to add a new store I can just change the options in the shortcode
For display de map I just past the shortcodes in the custom post type "stores" o in spanish "tiendas"
[wpmap_map]
[wpmap_directions_input location="3.1234,2.12345"]
[wpmap_directions_container]
the url is www.sitiosguau.com/santiveri
send you my username and so trough message