Google Map API

JavaScript
1

Hi,

I’m a fairly basic level with php and have no experience with Javascript so am having a bit of a problem with something i want to do with Google Map API and was wondering if anyone could take a quick look. I have it setup 90% now how i need it. I have set it up so that users can select their location on the Map by clicking and every time they click a marker is placed and the previous marker they placed is removed. This LatLng location is then inserted into a textfield which i use in my php script to add to my database. However, when this has all been done a need a new script for when a user wants to edit their Map location that they stored previously. I want to take their existing LatLng location from my database and place a corresponding marker on the Map but then also allow them to click somewhere else on the Map which will remove the initial marker and also place the new LatLng into my textfield. Here is my code so far which doesnt yet deal with the Editing problem:

<script>

// checks if the user provided all the data for adding a new location
function check()
{
	if (document.getElementById('lat').value == "" || document.getElementById('long').value == "" || document.getElementById('address').value == "")
	{
		alert("Click on the map to choose location!");
		return false;
	}

	return true;
}

</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
//Source Code from http://www.1stwebdesigner.com/tutorials/interactive-travel-map-google-maps-api/
	var geocoder;
	var map;
	
	// initializing the map
	function initialize()
	{
		// define map center
		var latlng = new google.maps.LatLng(53.380052,-6.998291);
		// define map options
		var myOptions = 
		{
			zoom: 7,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			scaleControl: true,
			navigationControl: true,
			navigationControlOptions: {
				style: google.maps.NavigationControlStyle.SMALL
			},
			mapTypeControl: true,
			mapTypeControlOptions: {
				style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
			}
		};
		
		// initialize map
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
		// add event listener for when a user clicks on the map
		google.maps.event.addListener(map, 'click', function(event) {
			findAddress(event.latLng);
			placeMarker(event.latLng);document.write(latLng)
		});
	}
	
	//Add a marker to the map where the user clicks.  Only display 1 marker at a time
	var marker;

	function placeMarker(location) {
  		if ( marker ) {
    	marker.setPosition(location);
  		} else {
    marker = new google.maps.Marker({
      position: location,
      map: map
    	});
  	}
	}

// finds the address for the given location
	function findAddress(loc)
	{
		geocoder = new google.maps.Geocoder(); 
		
		if (geocoder) 
		{
			geocoder.geocode({'latLng': loc}, function(results, status) 
			{
				if (status == google.maps.GeocoderStatus.OK) 
				{
					if (results[0]) 
					{
						address = results[0].formatted_address;
						
						// fill in the results in the form
						document.getElementById('lat').value = loc.lat();
						document.getElementById('long').value = loc.lng();
						document.getElementById('address').value = address;
					}
				} 
				else 
				{
					alert("Geocoder failed due to: " + status);
				}
			});
		}
	}
</script>

Anyone know how to get it setup this way?

Thanks!

2

You need to put the marker in there with PHP. I would to that somewhere in the initialize function after the map has been created. Assume you have $lat and $lang available, you’d do something like


<script>
// ...
function initialize()
{
// map = etc
<?php
if ($lat != '' && $lang != ''): 
marker = new google.maps.Marker({
  position: new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lang; ?>),
  map: map
});

<?php endif; ?>
// ...
}
// ...
<script>