Week #9 Challenge: Google Maps API

  • (2 Pages)
  • +
  • 1
  • 2

21 Replies - 8478 Views - Last Post: 17 July 2010 - 01:22 PM

#1 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1866
  • View blog
  • Posts: 20,278
  • Joined: 17-March 01

Week #9 Challenge: Google Maps API

Post icon  Posted 01 March 2010 - 01:56 PM

Put Your Company On the Map!

Posted Image

Challenge submitted by arthurakay

Challenge: Use the Google Maps API to create an interactive map or mashup.

The Google Maps API has been around for a few years and is one of the more frequently used APIs offered by Google. The benefits of using the Google Maps API are obvious: it's free, simple to use, and (most importantly) visually impressive. In order to use the Google Maps API, you only need a basic understanding of HTML, CSS and Javascript - so almost anyone involved in web development can find ways to use it!

Ideas:
- Mark Your House
- Include your Avatar in your marker
- Create custom markers

Ideas for Advanced Users:
- try adding the various map overlays (Traffic, StreetView, etc.)
- explore the GMap2() class methods (enableDoubleClickZoom, enableGoogleBar, etc.)
- try adding more than one location and marker


Example: Adding a map to your website.
<html>
  <head>
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXXXXXXXX" type="text/javascript"></script> 

	<script type="text/javascript"> 
	//<![CDATA[
	function load() {
	  if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());

		var companyAddress = "1600 Pennsylvania Avenue, Washington, DC 20500";

		var geoCoder = new GClientGeocoder();
		geoCoder.getLatLng(companyAddress, function(point) {
			map.setCenter(point, 14);
			map.addOverlay(new GMarker(point));
			map.openInfoWindowHtml(point, "This is the White House!");
		});
	  }
	}
	//]]>
	</script> 
  </head>
  <body onload="load()" onunload="GUnload()">
	<div id="map" style="margin: 5px; height: 500px; width: 500px;"></div>
  </body>
</html>



In the example above, you will see that we create a 500x500 pixel map that has centered on the White House.

We use the Javascript method getElementById() to locate the DIV element where the map will be rendered. We then provide the Google Maps API with the appropriate address for our map location, and finally place a marker on the map with an info window listing our company for the world to see.

To build your own map you need to do two things:
(1) you need to get your own API "key" here (If you're just testing this out on a file:// or localhost address, you don't need a key), replacing the "XXXXXXXXXX" in my example
(2) you need to replace the White House address with your own

(Note: Be sure to use the onload() and onunload() event handlers on the BODY tag - the map won't work correctly without them!)


Resources:
- Google Maps API: http://code.google.com/apis/maps/

Is This A Good Question/Topic? 2
  • +

Replies To: Week #9 Challenge: Google Maps API

#2 Skaggles  Icon User is offline

  • THE PEN IS MIGHTIER
  • member icon





Reputation: 251
  • View blog
  • Posts: 640
  • Joined: 01-March 09

Re: Week #9 Challenge: Google Maps API

Posted 01 March 2010 - 05:37 PM

The amusing part is I just got the book "Google Maps Applications with Rails and AJAX". How odd is that?
Was This Post Helpful? 1
  • +
  • -

#3 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 5937
  • View blog
  • Posts: 10,346
  • Joined: 28-September 07

Re: Week #9 Challenge: Google Maps API

Posted 01 March 2010 - 05:44 PM

Might have to try this one if I get time this week. :D
Was This Post Helpful? 0
  • +
  • -

#4 erik.price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 485
  • View blog
  • Posts: 2,690
  • Joined: 18-December 08

Re: Week #9 Challenge: Google Maps API

Posted 01 March 2010 - 07:33 PM

I was making a desktop application to work with the Google Static Maps API, and then I saw this lovely line in the terms of use

Quote

[you may not] 10.8 use the Static Maps API other than in an implementation in a web browser;


I guess I'll have to try something else then!
Was This Post Helpful? 0
  • +
  • -

#5 no2pencil  Icon User is offline

  • Toubabo Koomi
  • member icon

Reputation: 5191
  • View blog
  • Posts: 26,899
  • Joined: 10-May 07

Re: Week #9 Challenge: Google Maps API

Posted 01 March 2010 - 07:40 PM

This is awesome, I've been wanting to work with the Google Maps API on my Yard Sale site for a while & never found the time. Here it is!
Was This Post Helpful? 0
  • +
  • -

#6 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1639
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: Week #9 Challenge: Google Maps API

Posted 01 March 2010 - 10:51 PM

Here's an example of displaying a map based on a site visitors IP address using PHP, cURL and of course the Google Maps API

Code to get IP address:
/*
*	Function to get the users IP address. We "attempt"
*	to determine if the user is coming through a proxy server
*	by checking if HTTP_X_FORWARDED_FOR is set, then we
*	use a regular expression to ensure the IP address
*	found is in the proper format
*/
function getIP()
{
	// here we check if the user is coming through a proxy
	// NOTE: Does not always work as proxies are not required
	//		 to provide this information
	if (isset($_SERVER["HTTP_X_FORWARDED_FOR"]))
	{
		//reg ex pattern
		$pattern = "/^(([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/";
		// now we need to check for a valid format
		if(preg_match($pattern, $_SERVER["HTTP_X_FORWARDED_FOR"]))
		{
			//valid format so grab it
			$userIP = $_SERVER["HTTP_X_FORWARDED_FOR"];
		}
		else
		{
			//invalid (proxy provided some bogus value
			//so just use REMOTE_ADDR and hope for the best
			$userIP = $_SERVER["REMOTE_ADDR"];
		}		
	}
	//not coming through a proxy (or the proxy
	//didnt provide the original IP)
	else
	{
		//grab the IP
		$userIP = $_SERVER["REMOTE_ADDR"];
	} 
	
	//return the IP address
	return $userIP;
}		



Code to generate image:
/*
* Function for displaying a Google Map based on the users
* location, which we get from their IP address then use
* HostInfo.info to get their location. Function expects
* 5 parameters:
*	1) Your Google Maps API key
*		* Can be obtained here http://code.google.com/apis/maps/signup.html
*	2) A default image incase a location cannot be
*	   gathered by the IP address
*	3) Width you want the returned image
*	4) Height you want the returned image
*	5) Zoom value
*
*
*	Returns an image source, either one for the Google Map
*	or the default image specified
*/
function ShowGoogleMap($api_key, $no_source, $width, $height, $zoom)
{	
	//viewers ip address
	$users_ip = getIP();
	//url for getting the users location
	$lookupURL = 'http://api.hostip.info/get_html.php?ip=' . $users_ip . '&location=true';
	
	//initiate a cUrl session
	$init = curl_init($lookupURL);
	/*
	set options for the cUrl session with the cUrl options:
	1) CURLOPT_RETURNTRANSFER
	2) CURLOPT_TIMEOUT

	cUrl options are located at:
	http://us3.php.net/manual/en/function.curl-setopt.php
	*/
	curl_setopt($init, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($init, CURLOPT_TIMEOUT, 10);
	
	//now perform the cUrl session
	$exec_cURL = curl_exec($init);
	
	//retrieve the information from the transfer
	$cUrl_info = curl_getinfo($init);
	
	//close the session
	curl_close($init);
	
	//check the resulting code, 200 means we
	//can move forward
	if($cUrl_info['http_code'] === 200) 
	{
		//check for a city value
		if(preg_match('/City: ([a-zA-Z].+[a-zA-Z]+)/', $exec_cURL, $city_match)) 
		{
			//check for a country value
			preg_match('/ \(([A-Z][A-Z])/', $exec_cURL, $country_match);

			//get the city & country
			$city = $city_match[1];
			$country = $country_match[1];

			//encode the city & country into $address variable
			//for use in the Google Map API url
			$address = urlencode($city . ", " . $country);

			//url for the Google map
			$mapURL = 'http://maps.google.com/maps/geo?q=' . $address  . '&output=csv&key=' .$api_key;

			//initialize a new cUrl session, set the same options as before
			//execute the session and retieve the infor from the session
			$init = curl_init($mapURL);
			curl_setopt($init, CURLOPT_RETURNTRANSFER, true);
			curl_setopt($init, CURLOPT_TIMEOUT, 10);
			$exec_cURL = curl_exec($init);
			$cUrl_info = curl_getinfo($init);

			//close the session
			curl_close($init);

			//check for a successful session (http_code of 200)
			if($cUrl_info['http_code'] === 200) 
			{
				//split the string
				$exec_cURL = explode("," ,$exec_cURL);
	  
				//get the latitude & longitude
				$lat = $exec_cURL[2];
				$lon = $exec_cURL[3];
	  
				//create the image course for displaying the Google map
				$img_source = 'http://maps.google.com/staticmap?key=' . $api_key . '&size=' . $width . 'x' . $height . '&markers=' . $lat . ',' . $lon . '&zoom=' . $zoom;
			} 
			else 
			{
				//nothing returned, default to supplied image
				$img_source = $no_source;
			}
		} 
		else 
		{
			//nothing returned, default to supplied image
			$img_source = $no_source;
		}
	} 
	else 
	{
		//nothing returned, default to supplied image
		$img_source = $no_source;
	}
	
	//return the image source
	return $img_source;
}



Sample Usage:
<img src='<? echo(ShowGoogleMap('YourGoogleMapsAPIKey', 'images/mounts/max.jpg', 555, 280, 4));?>' />


Was This Post Helpful? 3
  • +
  • -

#7 Dogstopper  Icon User is offline

  • The Ninjaducky
  • member icon



Reputation: 2870
  • View blog
  • Posts: 11,021
  • Joined: 15-July 08

Re: Week #9 Challenge: Google Maps API

Posted 03 March 2010 - 03:23 PM

View Posterik.price, on 01 March 2010 - 09:33 PM, said:

I was making a desktop application to work with the Google Static Maps API, and then I saw this lovely line in the terms of use

Quote

[you may not] 10.8 use the Static Maps API other than in an implementation in a web browser;


I guess I'll have to try something else then!


Technically, since your 16, you're not bound to the terms of contract yet... I'm not promoting this, but I'm jus' sayin'
Was This Post Helpful? 0
  • +
  • -

#8 aniri  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 54
  • View blog
  • Posts: 657
  • Joined: 24-November 09

Re: Week #9 Challenge: Google Maps API

Posted 03 March 2010 - 04:41 PM

I've had the same idea as PsychoCoder, but I implemented it differently, so I hope you won't mind that I post the same stuff...

You can see the result here. Just in case you forgot where you are :P

And the code:

the whereami.php script
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
	var xmlhttp;
	var city;
	var country;
	var latitude;
	var longitude;
	
	function initialize()
	{
		// get user's ip address 
		var ip_address = "<?php echo $_SERVER['REMOTE_ADDR']?>";

		// get city + country of the ip address
		var loc = getLocation(ip_address);
	}
	
	function getLocation(ip)
	{
		xmlhttp=GetXmlHttpObject();
		if (xmlhttp==null)
		{
			alert ("Browser does not support HTTP Request");
			return;
		}
		var url="getLocation.php?ip="+ip;
		url=url+"&sid="+Math.random();

		xmlhttp.open("GET",url,true);
		xmlhttp.onreadystatechange=stateChanged;
		xmlhttp.send(null);
	}

	function stateChanged()
	{
		if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
		{
			var xmlDoc;

			xmlDoc = null;
			if (window.DOMParser)
			{
				parser=new DOMParser();
				xmlDoc=parser.parseFromString(xmlhttp.responseText,"text/xml");
			}
			else // Internet Explorer
			{
				xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
				xmlDoc.async="false";
				xmlDoc.loadXML(xmlhttp.responseText);
			} 
			
			// parse xml from url
			country = xmlDoc.getElementsByTagName("CountryName")[0].childNodes[0].nodeValue;
			city = xmlDoc.getElementsByTagName("City")[0].childNodes[0].nodeValue;
			latitude = xmlDoc.getElementsByTagName("Latitude")[0].childNodes[0].nodeValue;
			longitude = xmlDoc.getElementsByTagName("Longitude")[0].childNodes[0].nodeValue;
			
			// show map centered on latitude/longitude
			var latlng = new google.maps.LatLng(latitude, longitude);
			var myOptions = 
			{
				zoom: 8,
				center: latlng,
				mapTypeId: google.maps.MapTypeId.HYBRID
			};
			
			var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			
			var contentString = '<div id="content">'+
				'<h1 id="firstHeading">You are here:</h1>'+
				'<div id="bodyContent">'+
				'<p>'+city+', '+country+' . Coordinates: '+latitude+', '+longitude+'</p>'+
				'</div>'+
				'</div>';

			var infowindow = new google.maps.InfoWindow({
				content: contentString
			});

			var marker = new google.maps.Marker({
				position: latlng,
				map: map,
				title:"There you are!"
			});

			google.maps.event.addListener(marker, 'click', function() {
			  infowindow.open(map,marker);
			});
			
			return;
		}
	}
	
	function GetXmlHttpObject()
	{
		if (window.XMLHttpRequest)
		{
			return new XMLHttpRequest();
		}
		else if(window.ActiveXObject)
		{
			try
			{
				return new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e)
			{
				return new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		else
		{
			return null;
		}

	}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>


the getLocation.php script
<?php
$ip = $_GET['ip'];

$url = 'http://ipinfodb.com/ip_query.php?ip='.$ip;
        
$init = curl_init($url);

curl_setopt($init, CURLOPT_RETURNTRANSFER, true);
curl_setopt($init, CURLOPT_TIMEOUT, 10);
        
$exec = curl_exec($init);
        
$info = curl_getinfo($init);
        
curl_close($init);

if($info['http_code'] == 200) 
{
	echo $exec;
}

?>

This post has been edited by aniri: 03 March 2010 - 04:43 PM

Was This Post Helpful? 2
  • +
  • -

#9 programble  Icon User is offline

  • (cons :dic :head)

Reputation: 49
  • View blog
  • Posts: 1,315
  • Joined: 21-February 09

Re: Week #9 Challenge: Google Maps API

Posted 03 March 2010 - 04:48 PM

ACK! :o IT KNOWS WHERE I AM!

Edit: Apparently I'm in the middle of a river :\

This post has been edited by programble: 03 March 2010 - 05:00 PM

Was This Post Helpful? 1
  • +
  • -

#10 Dogstopper  Icon User is offline

  • The Ninjaducky
  • member icon



Reputation: 2870
  • View blog
  • Posts: 11,021
  • Joined: 15-July 08

Re: Week #9 Challenge: Google Maps API

Posted 03 March 2010 - 05:21 PM

LOL...mine's off by about 31 miles...Fortunately, I know where I am...
Was This Post Helpful? 0
  • +
  • -

#11 erik.price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 485
  • View blog
  • Posts: 2,690
  • Joined: 18-December 08

Re: Week #9 Challenge: Google Maps API

Posted 03 March 2010 - 05:28 PM

View PostDogstopper, on 03 March 2010 - 04:23 PM, said:

Technically, since your 16, you're not bound to the terms of contract yet... I'm not promoting this, but I'm jus' sayin'

Google actively defends their rule, I got a 400 HTML response code from Java, and from the exact same URL the map appeared when I viewed it in Firefox.

There's always the possibility I coded something horrifically wrong though ;)
Was This Post Helpful? 0
  • +
  • -

#12 Paul-  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 61
  • View blog
  • Posts: 260
  • Joined: 11-December 09

Re: Week #9 Challenge: Google Maps API

Posted 03 March 2010 - 07:38 PM

This is a straight-forward overlay of a picture onto a map. If you have never been there, you should go visit. Especially the places with the guy in the red cape. To test it, unzip the attachment and open file index.html in your browser.

Attached File  wk09.zip (1.2MB)
Number of downloads: 170

<html>
  <head>
    <title>Transylvania</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=XXXXXXXXXX"
    type="text/javascript"></script>

    <script type="text/javascript">
    function load() {
      if (GBrowserIsCompatible()) {
      
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(46.40, 24.16), 8);

        // ground overlay
        var boundaries = new GLatLngBounds(new GLatLng(45.30,22.40), new GLatLng(47.55,26.40));
        var oldmap = new GGroundOverlay("./transilvania.png", boundaries);
        map.setUIToDefault();
        map.addOverlay(oldmap);
      }
    }
    </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="margin: 5px; width: 900px; height: 700px"></div>
  </body>
</html>


This post has been edited by Paul-: 03 March 2010 - 07:53 PM

Was This Post Helpful? 3
  • +
  • -

#13 Merddin  Icon User is offline

  • New D.I.C Head

Reputation: 12
  • View blog
  • Posts: 37
  • Joined: 19-February 10

Re: Week #9 Challenge: Google Maps API

Posted 03 March 2010 - 08:07 PM

Here's mine. I decided to go with getting my avatar onto the map. I was fighting with it for a while, trying to have the button 'animate' the avatar, but couldn't figure out how to remove the previous marker.

Anyway, here it is ...

<html>
  <head>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXXXXXXXX" type="text/javascript"></script> 

        <script type="text/javascript"> 
        //<![CDATA[
        // We define the function first
		function TextualAppearControl() {
		}

		// To "subclass" the GControl, we set the prototype object to an instance of the GControl object
		TextualAppearControl.prototype = new GControl();

		// Creates a one DIV for each of the buttons and places them in a container
		// DIV which is returned as our control element. We add the control to
		// to the map container and return the element for the map class to
		// position properly.
		TextualAppearControl.prototype.initialize = function(map) {
			var flag = 0;
			var container = document.createElement("div");

			var appearDiv = document.createElement("div");
			this.setButtonStyle_(appearDiv);
			container.appendChild(appearDiv);
			appearDiv.appendChild(document.createTextNode("Appear"));
			GEvent.addDomListener(appearDiv, "click", function() {
				
				var avatar = new GIcon();
						
				avatar.iconSize = new GSize(60, 70);
				avatar.iconAnchor = new GPoint(6, 20);
				avatar.infoWindowAnchor = new GPoint(5, 1);
				markerOptions = { icon:avatar };
				var point = new GLatLng(45.424673,-75.699492);
				var g = new GMarker(point, markerOptions);

				// Add avatar icon to map
					
				avatar.image = "./ff1_sprite_blackmage.gif";				
				map.addOverlay(g);
			}); 

			map.getContainer().appendChild(container);
			return container;
		}

		// By default, the control will appear in the top left corner of the
		// map with 7 pixels of padding.
		TextualAppearControl.prototype.getDefaultPosition = function() {
			return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
		}

		// Sets the proper CSS for the given button element.
		TextualAppearControl.prototype.setButtonStyle_ = function(button) {
			button.style.textDecoration = "underline";
			button.style.color = "#0000cc";
			button.style.backgroundColor = "white";
			button.style.font = "small Arial";
			button.style.border = "1px solid black";
			button.style.padding = "2px";
			button.style.marginBottom = "3px";
			button.style.textAlign = "center";
			button.style.width = "6em";
			button.style.cursor = "pointer";
		}

		
		function load() {
		if (GBrowserIsCompatible()) {
			var map = new GMap2(document.getElementById("map"));
			map.addControl(new TextualAppearControl());

			map.setCenter(new GLatLng(45.425174,-75.700023), 18);

			map.setMapType(G_SATELLITE_MAP);
			
			// Create avatar icon
			
          }
        }
        //]]>
        </script> 
  </head>
  <body onload="load()" onunload="GUnload()">
        <div id="map" style="margin: 5px; height: 500px; width: 500px;"></div>
  </body>
</html>



I've attached it too, so you can have the most amazing 8-bit graphics ever produced. Just unzip it and open the .html file. Sorry, I don't have a webpage to host it from (at least not one where I can edit the <body> tags ...)

Attached File  GoogleMaps.zip (1.79K)
Number of downloads: 171

View PostPaul-, on 03 March 2010 - 06:38 PM, said:

If you have never been there, you should go visit. Especially the places with the guy in the red cape.


Have you been? Looks amazing. I'd love to go, maybe one day when the kiddies are all growed up ...

This post has been edited by Merddin: 03 March 2010 - 08:06 PM

Was This Post Helpful? 2
  • +
  • -

#14 aniri  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 54
  • View blog
  • Posts: 657
  • Joined: 24-November 09

Re: Week #9 Challenge: Google Maps API

Posted 04 March 2010 - 12:07 AM

I've been there :P

I've added an improvement to my map. If you type in your street address it will show a more exact location and place a pin there.

Check here.

The code:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
	var xmlhttp;
	var city;
	var country;
	var latitude;
	var longitude;
	
	var geocoder;
	var map;
	
	function initialize()
	{
		geocoder = new google.maps.Geocoder();

		// get user's ip address 
		var ip_address = "<?php echo $_SERVER['REMOTE_ADDR']?>";

		// get city + country of the ip address
		var loc = getLocation(ip_address);
	}
	
	function codeAddress() 
	{
		var address = document.getElementById("address").value;
		address += ","+city+","+country;
		if (geocoder) 
		{
			geocoder.geocode( { 'address': address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					map.setCenter(results[0].geometry.location);
					var marker = new google.maps.Marker({
						map: map, 
						position: results[0].geometry.location,
						title:"New location!"
					});
				} else {
					alert("Geocode was not successful for the following reason: " + status);
				}
			});
		}
	}

	
	function getLocation(ip)
	{
		xmlhttp=GetXmlHttpObject();
		if (xmlhttp==null)
		{
			alert ("Browser does not support HTTP Request");
			return;
		}
		var url="getLocation.php?ip="+ip;
		url=url+"&sid="+Math.random();

		xmlhttp.open("GET",url,true);
		xmlhttp.onreadystatechange=stateChanged;
		xmlhttp.send(null);
	}

	function stateChanged()
	{
		if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
		{
			var xmlDoc;

			xmlDoc = null;
			if (window.DOMParser)
			{
				parser=new DOMParser();
				xmlDoc=parser.parseFromString(xmlhttp.responseText,"text/xml");
			}
			else // Internet Explorer
			{
				xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
				xmlDoc.async="false";
				xmlDoc.loadXML(xmlhttp.responseText);
			} 
			
			// parse xml from url
			country = xmlDoc.getElementsByTagName("CountryName")[0].childNodes[0].nodeValue;
			city = xmlDoc.getElementsByTagName("City")[0].childNodes[0].nodeValue;
			latitude = xmlDoc.getElementsByTagName("Latitude")[0].childNodes[0].nodeValue;
			longitude = xmlDoc.getElementsByTagName("Longitude")[0].childNodes[0].nodeValue;
			
			// show map centered on latitude/longitude
			var latlng = new google.maps.LatLng(latitude, longitude);
			var myOptions = 
			{
				zoom: 8,
				center: latlng,
				mapTypeId: google.maps.MapTypeId.HYBRID
			};
			
			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			
			var contentString = '<div id="content">'+
				'<h1 id="firstHeading">You are here:</h1>'+
				'<div id="bodyContent">'+
				'<p>'+city+', '+country+' . Coordinates: '+latitude+', '+longitude+'</p>'+
				'</div>'+
				'</div>';

			var infowindow = new google.maps.InfoWindow({
				content: contentString
			});

			var marker = new google.maps.Marker({
				position: latlng,
				map: map,
				title:"There you are!"
			});

			google.maps.event.addListener(marker, 'click', function() {
			  infowindow.open(map,marker);
			});
			
			return;
		}
	}
	
	function GetXmlHttpObject()
	{
		if (window.XMLHttpRequest)
		{
			return new XMLHttpRequest();
		}
		else if(window.ActiveXObject)
		{
			try
			{
				return new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e)
			{
				return new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		else
		{
			return null;
		}

	}
	
</script>
</head>
<body onload="initialize()">
	<div id="address_details" style="width:100%; height:10%">
		For a more exact location enter your street address (example 15 Green Street):<input type="text" name="address" id="address"/>
		<input type="button" value="Show" onclick="codeAddress()"/>
	</div>
	<div id="map_canvas" style="width:100%; height:90%"></div>
</body>
</html>

This post has been edited by aniri: 04 March 2010 - 04:39 AM

Was This Post Helpful? 3
  • +
  • -

#15 programble  Icon User is offline

  • (cons :dic :head)

Reputation: 49
  • View blog
  • Posts: 1,315
  • Joined: 21-February 09

Re: Week #9 Challenge: Google Maps API

Posted 04 March 2010 - 10:30 AM

Hm, I don't think my house is close enough to where my internet is coming from, so it doesn't find it. Even then, Google Maps doesn't know which house is actually 98 on the street.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2