Basic JS issue kicking my ass

aidan_walsh · 23-04-2008 08:15PM #1

Its been so long since I have done any real web work its daft. But I got the notion into my head to play with the Google Maps API and see what I could get it to churn out. However, forgetting a lot of Javascript is not getting me far, and Google has not been very helpful. I know I'm only missing something small or fundamental, so whoever feels like making the mod look an idiot feel free to pipe up

I want to create a function to create a GMarker on the press of a button, but I cannot for the life of me get the map to reference outside the function it is created in.

Here is my page:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[stuff]"
      type="text/javascript"></script>
    <script src="./map.js" type="text/javascript"></script>

  </head>
  
  <body onload="load()" onunload="GUnload()">
	<div id="create">
		<form action="" method="post">
			<input type="button" name="drop" value="Drop Pin" onclick="dropPin()" />
		</form>
	</div>

	<div id="map"></div>
  </body>
</html>

map.js

var map = null;

function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
		map.removeMapType(G_SATELLITE_MAP);
		map.removeMapType(G_HYBRID_MAP);
		
		var point = new GLatLng(53.45, -8.0);
        map.setCenter(point, 7);
		var mapControl = new GMapTypeControl();
		map.addControl(mapControl);
		map.addControl(new GLargeMapControl());
				
		var marker = new GMarker(point, {draggable: true});
		
		GEvent.addListener(marker, "dragend", function(){
			var newPoint = marker.getLatLng();
			var lat = document.getElementById("lat");
			lat = newPoint.lat();
			var lng = document.getElementById("lng");
			lng = newPoint.lng();
			point = marker.getLatLng();
			});

		GEvent.addListener(marker, "click", function(){
    		var myHtml = "Lat: " + point.getLat() + "<br/>Lng: " + point.getLng();
    		map.openInfoWindowHtml(point, myHtml);
  			});
					
		map.addOverlay(marker);
      }
}

function dropPin(){
	var newPoint  = new GLatLng(53.45, -8.0); 	
	var newMarker = new GMarker(point {draggable: true});
	map.addOverlay(newMarker);
}

I feel daft even posting this, but I can't afford to lose any more hair

grahamor · 23-04-2008 08:44PM

Dont feel daft, we all have those days. Tip:use firebug to help debug...

in your dropPin function you declare newPoint but then you try making a gMarker with the point instead of newPoint. Also, you are missing a comma after point.

So

var newPoint  = new GLatLng(53.45, -8.0); 	
	var newMarker = new GMarker(point {draggable: true});

Should be

var newPoint  = new GLatLng(53.45, -8.0); 	
	var newMarker = new GMarker(newPoint, {draggable: true});

Hope it helps (it works for me)

aidan_walsh · 23-04-2008 09:00PM

Fresh pair of eyes was all it needed. Thanks

Basic JS issue kicking my ass

Comments