Google Maps API

Drongo_III · August 12, 2012

Hi Guys

I am having my first trip into the worlds of google maps api v3.

This far I can generate a map based off a location lookup. This is all just rough to test things out (see code below).

What I am really stuck with is how to get the geocoding to work.

All I want to do is geocode an address and display the new marker on my map. But i can't even get google's example to work :/ Can anyone propose a way to make this work with my little bit of code below?

I've been at this for about four hours so any help would be appreciated :'(

Google's example code

geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': 'london' }, 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
  });

My Code

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=XXXXXX&sensor=true">
    </script>
    <script type="text/javascript">

// Innitiate call to get coords

	function getLoc(){

		navigator.geolocation.getCurrentPosition(getCord, errorFunc, {enableHighAccuracy: true});

	}

	// Position check was successful - therefore set vars and call map
	function getCord(position){

		var lat = position.coords.latitude;
		var longe = position.coords.longitude;

		initialize(lat, longe);

	}

	// Report error when finding coords
	function errorFunc(error){

	var error = error.code;

	alert(error);
	}



// Initialise the Google Map
      function initialize(lat, longe) {
       

	var lat = lat;
	var longe = longe;

	var mapOptions = {

          center: new google.maps.LatLng(lat, longe),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

	var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, longe),
        map: map,
	title: 'tester'

      });
  

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

Drongo_III · August 13, 2012

Half cracked it.

Sign In

Google Maps API

Recommended Posts

Drongo_III

Link to comment

Share on other sites

Drongo_III

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information