In many cases, your members might want to show their Google Map (Latitude & Longitude based) position on their Profile Page. We have made it easy to implement this by following this simple steps:


1. On your Backend Dashboard, go to Toolbox -> Widget Manager. On the Widget Manager Search box, type Profile Overview Tab and click on the Search button. When the results appears, click on the Customize button on the Profile Overview Tab widget.



2. Once you have added the Profile Overview Tab to your My widget list, click on the Edit button.



3.  Once the Profile Overview Tab Widget is opened, you can paste the following code in order to add the Google Map to it. For this go to line 137 on the Widget Code and select everything between lines 137 and 154. This should end up similar to the image below where we are selecting everything between the <tr> and </tr> HTML elements.



4. Paste the following code so it overwrites what you have previously selected:

  

<tr>
	<td class="one">Map View</td>
	<td>
		<img src="<? echo "http://maps.google.com/maps/api/staticmap?center=$user[lat],$user[lon]&zoom=$user[gmap_zoom]&size=300x185&sensor=false&markers=size:large|color:blue|". $user[lat] . ',' . $user[lon]; ?>" alt="Location of <? echo "$user[full_name]"; ?> <?=ucwords($w[trade])?>" /><br><? if ($user[gmap]!="") { ?><p style="margin-bottom:10px;"><a style="font-size:11px;" target="_blank" href="http://maps.google.com/maps?daddr=<? if ($user[lat]!='' && $user[lon]!=''){ echo $user[lat].','.$user[lon].'&saddr='.$_SESSION[vdisplay];  }else{ echo $user[gmap].'&saddr='.$_SESSION[vdisplay]; } ?>" title="Click for directions to this event">Get Directions &raquo;</a></p><? } ?>
	</td>
</tr>

  

It should look similar to this:



5. We are only half way there. We now need to go to our Contact Form. So let's go to Toolbox -> Form Manager and select the Listing - Contact form (Could also be called Contact Details form).



6. Here we will be creating 3 fields that will be used for: A Widget, Latitude & Longitude.


For the first field (The widget), we will create a field and on the field label, we will paste the following: [widget=contact_details_map_directions]. For the variable name you can put anything you want. In our case we used testmap. The field type needs to be Custom HTML.


For the Latitude, we will create another field and on the Field Label, we will put "Latitude". The variable name needs to be lat. The field type can be Text Field.


For the Longitude, we will create another field and on the Field Label, we will put "Longitude". The variable name needs to be lon. The field type can be Text Field.


The 3 new fields should look like the image below.




6. Save it and test it by going to any Member's Profile page. You should now see something like this:



Note that in this example we only have Company Name, Location and Map View. You can add more options here by including more <tr></tr> HTML elements on this widget and extend the Profile Page however you want. Take into consideration that for the map to actually show, the values for Longitude (Variable lon) and Latitude (Variable lat) must exist. They are automatically created when a member updates their profile with their address, city, state, country, zip code and any additional information that can help Google locate their specific geographical location.




For cases where the code in Step 4 does not correctly show the direction (eg: When clicking on the Get directions url), then here is a custom made Google Maps for it:


 

<td class="one">Map View</td>
<td><img src="<? echo "http://maps.google.com/maps/api/staticmap?center=$user[gmap]&zoom=$user[gmap_zoom]&size=300x185&sensor=false&markers=size:large|color:blue|".$user[gmap]; ?>" alt="Location of <? echo "$user[full_name]"; ?> <?=ucwords($w[trade])?>" /><br>
   <? if ($user[gmap]!="") { ?><p style="margin-bottom:10px;"><a style="font-size:11px;" target="_blank" href="http://maps.google.com/maps?daddr=<?echo  $user[zip_code].'+'.$user[city].'+'.$user[state_name].'+'.$user[country_name].'&saddr='.$_SESSION[vdisplay]; ?>" title="Click for directions to this event">Get Directions &raquo;</a></p><? } ?>
</td>
</tr>