adding google maps into admin side of a module

[rlparker25]

Hi,

I am trying to alter the events module so that you can give the event a location which will be displayed on a google map on the website.

At the moment I have added fields so you can enter longitude and latitude but what I would really like to do is add in a google map so people can drag the marker to the location they want and that will generate the longitude and latitude.

I have the googlemap code working on a test file http://bible.bpweb.net/googlemaptest.html but I cant figure out how to add it to the admin page. I am not getting any error messages just an empty space where the map should appear. At the moment I am not concerned about linking it to any of the form fields, I am just trying to get the map to appear!

I have changed the template to

Code: Select all

{$startform}
<div class="pageoverflow">
	<p class="pagetext">*{$prompt_short}:</p>
	<p class="pageinput">{$input_short}</p>
</div>
<div class="pageoverflow">
	<p class="pagetext">Summary:</p>
	<p class="pageinput">{$input_summary}</p>
</div>
<div class="pageoverflow">
	<p class="pagetext">*{$prompt_long}:</p>
	<p class="pageinput">{$input_long}</p>
</div>
<div class="pageoverflow">
	<p class="pagetext">Location</p>
	<p class="pageinput">{$input_location}</p>
</div>
<div class="pageoverflow">
	  {literal} 
	   <__script__ src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjETekHX1BrskcQywhkrYOxRtiL-cSRPPhIaiZ0Cdon549B3RWxQh_7ualzt-3LPymKTLJXXMH2KP0g"
      type="text/javascript"></__script>
    <__script__ type="text/javascript">

    //<![CDATA[

    var map = null;
    var geocoder = null;
    var marker = null;
	
	load();
	
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
		
		
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GScaleControl());
		map.addControl(new GOverviewMapControl());
		map.setCenter(new GLatLng(55.37813515249014, -3.4352874755859375), 5);
        	geocoder = new GClientGeocoder();
				
      }
    }

    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert("Sorry, we were unable to find  " + address + ".");
            } else {
              var lat = point.lat();
   	      var lng = point.lng();
   	      map.setCenter(new GLatLng(lat,lng), 13);

              if (marker) map.removeOverlay(marker);
              marker = new GMarker(point, {draggable: true});
//document.forms["mapForm"].elements["latitude"].value = lat;
			//  document.forms["mapForm"].elements["longtitude"].value = lng;
   	      //alert("The coordinates are: " + lat + ", " + lng);              
                          
	      GEvent.addListener(marker, "dragstart", function() {
              map.closeInfoWindow();
              });

             GEvent.addListener(marker, "dragend", function() {
             marker.openInfoWindowHtml("This is the new position");
	     var lat = marker.getPoint().lat();
      	     var lng = marker.getPoint().lng();
      	     //alert("The coordinates are: " + lat + ", " + lng);
			// document.forms["mapForm"].elements["latitude"].value = lat;
			 // document.forms["mapForm"].elements["longtitude"].value = lng;
             });

             map.addOverlay(marker);
              marker.openInfoWindowHtml("This is the location that you marked");

            }
          }
        );
		
      }
    }
    //]]>
    </__script>

	{/literal}
			  <div id="map" style="width: 550px; height: 450px"></div>

</div>
<div class="pageoverflow">
	<p class="pagetext">Longitude</p>
	<p class="pageinput">{$input_longitude}</p>
</div>
<div class="pageoverflow">
	<p class="pagetext">Latitude</p>
	<p class="pageinput">{$input_latitude}</p>
</div>
<div class="pageoverflow">
	<p class="pagetext">*{$prompt_start_date}:</p>
	<p class="pageinput">
		Date:
		{html_select_date
			prefix=$prefix_startdate
			time=$start_date
			start_year="-5"
			end_year="+10"}
		Time:
		{html_select_time
			display_seconds=false
			minute_interval=15
			prefix=$prefix_startdate
			time=$start_date}
	</p>
</div>
<div class="pageoverflow">
	<p class="pagetext">*{$prompt_end_date}:</p>
	<p class="pageinput">
		Date:
		{html_select_date
			prefix=$prefix_enddate
			time=$end_date
			start_year="-5"
			end_year="+10"}
		Time:
		{html_select_time
			display_seconds=false
			minute_interval=15
			prefix=$prefix_enddate
			time=$end_date}
	</p>
</div>
<div class="pageoverflow">
	<p class="pagetext"> </p>
	<p class="pageinput">{if isset($idfield)}{$idfield}{/if}{$submit}{$cancel}{$apply}</p>
</div>
{$endform}

If anyone could tell me where I am going wrong or a better way to add it I would be very greatful

Thank you

Rachael

[alby]

Longitude
{$input_longitude}


Latitude
{$input_latitude}




If anyone could tell me where I am going wrong or a better way to add it I would be very greatful

Check input text (lon and lat)?

Alby

[rlparker25]

sorry, i'm not sure what you mean?

at the moment I am not trying to output the long and lat, I am just trying to get teh map to appear and a search field so you can type in a location and have it displayed on the map

[alby]

sorry, i'm not sure what you mean?

That input are not lon and lat but about m1_lon and m1_lat

at the moment I am not trying to output the long and lat, I am just trying to get teh map to appear and a search field so you can type in a location and have it displayed on the map

I have not tested but I think that should work (attention to map key)

Alby

[rlparker25]

Ok I have got it working with a few tweaks to the javascript.

This is the finished template file if anyone would like to do something similar

Code: Select all

{$startform}
<div class="pageoverflow">
	<p class="pagetext">*{$prompt_short}:</p>
	<p class="pageinput">{$input_short}</p>
</div>
<div class="pageoverflow">
	<p class="pagetext">Summary:</p>
	<p class="pageinput">{$input_summary}</p>
</div>
<div class="pageoverflow">
	<p class="pagetext">*{$prompt_long}:</p>
	<p class="pageinput">{$input_long}</p>
</div>

<div class="pageoverflow">
	  {literal} 
	            <__script__ src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjETekHX1BrskcQywhkrYOxRtiL-cSRPPhIaiZ0Cdon549B3RWxQh_7ualzt-3LPymKTLJXXMH2KP0g" type="text/javascript" charset="utf-8"></__script>

					  <__script__ type="text/javascript" src="/js/jquery.js"></__script>
					<__script__ type="text/javascript">
				
					//<![CDATA[
				
					var map = null;
					var geocoder = null;
					var marker = null;
					
					function disableEnterKey(e)
					{
						 var key;
					
						 if(window.event)
							  key = window.event.keyCode;     //IE
						 else
							  key = e.which;     //firefox
					
						 if(key == 13)
							  return false;
						 else
							  return true;
					}	
									
					$(document).ready( function() {
					
						load();
						$("#submitGoogleAdd").click(function () { 
	
							address = $("#m1_location").val();

							showAddress(address); 
							return false;
						});	
						
						$("#contentform").bind("keydown", function(e) {
						  if (e.keyCode == 34) return false;
						});

					});

					
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
		
		
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GScaleControl());
		map.addControl(new GOverviewMapControl());
		if ( $("input[name=\'m1_longitude\']").val() && $("input[name=\'m1_latitude\']").val() ) {
		map.setCenter(new GLatLng($("input[name=\'m1_longitude\']").val(), $("input[name=\'m1_latitude\']").val()), 13);
		//alert('hello');
		///////////
	

          
              var lat = $("input[name=\'m1_latitude\']").val();
   	          var lng = $("input[name=\'m1_longitude\']").val();
		  
              
          // map.setCenter(new GLatLng(lat,lng), 13);

              if (marker) map.removeOverlay(marker);
			  
			  point = new GPoint($("input[name=\'m1_latitude\']").val(),$("input[name=\'m1_longitude\']").val());

              marker = new GMarker(point, {draggable: true});
			  
	
                          
	         GEvent.addListener(marker, "dragstart", function() {
              map.closeInfoWindow();
              });

             GEvent.addListener(marker, "dragend", function() {
				 marker.openInfoWindowHtml("This is the new position");
				 var lat = marker.getPoint().lat();
				 var lng = marker.getPoint().lng();
				 
				   $("input[name=\'m1_longitude\']").val( lat );
			 $("input[name=\'m1_latitude\']").val( lng );
      	    			 
             });

             map.addOverlay(marker);
              marker.openInfoWindowHtml("This is the location that you marked");
           


		//////////
		}
		else {		 
		map.setCenter(new GLatLng(55.37813515249014, -3.4352874755859375), 5);
		}
        	geocoder = new GClientGeocoder();
				
      }
    }

    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert("Sorry, we were unable to find  " + address + ".");
            } else {
              var lat = point.lat();
   	      var lng = point.lng();
   	      map.setCenter(new GLatLng(lat,lng), 13);

              if (marker) map.removeOverlay(marker);
              marker = new GMarker(point, {draggable: true});
			  
			  $("input[name=\'m1_longitude\']").val( lat );
			 $("input[name=\'m1_latitude\']").val( lng );
			     
                          
	      GEvent.addListener(marker, "dragstart", function() {
              map.closeInfoWindow();
              });

             GEvent.addListener(marker, "dragend", function() {
             marker.openInfoWindowHtml("This is the new position");
	     var lat = marker.getPoint().lat();
      	     var lng = marker.getPoint().lng();
      	     //alert("The coordinates are: " + lat + ", " + lng);
			 
			 $("input[name=\'m1_longitude\']").val( lat );
			 $("input[name=\'m1_latitude\']").val( lng );
			 
             });

             map.addOverlay(marker);
              marker.openInfoWindowHtml("This is the location that you marked");

            }
          }
        );
		
      }
    }
					//]]>
					</__script>
						
	{/literal}
	
		<p class="pageinput">Location: {$input_location}				  
					  <input type="button" value="View" id="submitGoogleAdd" onKeyPress="return disableEnterKey(event)"/>
				 
				  <div id="map" style="width: 550px; height: 450px"></div>
			 </p>
</div>
<div class="pageoverflow">
	<p class="pagetext">Longitude</p>
	<p class="pageinput">{$input_longitude}</p>
</div>
<div class="pageoverflow">
	<p class="pagetext">Latitude</p>
	<p class="pageinput">{$input_latitude}</p>
</div>
<div class="pageoverflow">
	<p class="pagetext">*{$prompt_start_date}:</p>
	<p class="pageinput">
		Date:
		{html_select_date
			prefix=$prefix_startdate
			time=$start_date
			start_year="-5"
			end_year="+10"}
		Time:
		{html_select_time
			display_seconds=false
			minute_interval=15
			prefix=$prefix_startdate
			time=$start_date}
	</p>
</div>
<div class="pageoverflow">
	<p class="pagetext">*{$prompt_end_date}:</p>
	<p class="pageinput">
		Date:
		{html_select_date
			prefix=$prefix_enddate
			time=$end_date
			start_year="-5"
			end_year="+10"}
		Time:
		{html_select_time
			display_seconds=false
			minute_interval=15
			prefix=$prefix_enddate
			time=$end_date}
	</p>
</div>
<div class="pageoverflow">
	<p class="pagetext"> </p>
	<p class="pageinput">{if isset($idfield)}{$idfield}{/if}{$submit}{$cancel}{$apply}</p>
</div>
{$endform}