using a variable in a google map script

thewhistler1 · Nov 12, 2009

I am trying to get a google map on my site but I cant figure part of it out. I know very little about javascript, Im sure this is a simple fix. The code below starts with one map and has a box to go to another location. What I would like is for the page to come up to whatever address that I have listed in a variable in the code of that page rather then having to click a button to take you to that location. Thanks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps API Example: Simple Geocoding</title>
    <script src="[URL unfurl="true"]http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=somekey"[/URL] type="text/javascript"></script>
    <script type="text/javascript">

    var map = null;
    var geocoder = null;
    var address = "some address";
	function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.closeInfoWindowHtml(address);
            }
          }
        );
      }
    }
	
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        geocoder = new GClientGeocoder();
      }
    }

    </script>
  </head>

  
  
  <body onload="initialize()" onunload="GUnload()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">
      <p>
        <input type="text" size="60" name="address" value="some address" />
        <input type="submit" value="Go!" />
      </p>
      <div id="map_canvas" style="width: 500px; height: 400px"></div>
    </form>

  </body>
</html>

BabyJeffy · Nov 12, 2009

...I know very little about javascript, Im sure this is a simple fix...

If you know very little about Javascript, how can you be "sure" that what you request is a simple fix? By your own admission you don't know... so why make such a presumption?

This isn't a "can you do this work for me for free" support site. If you have a genuine problem, come back and ask for help (on that specific problem) clearly outlining what you have tried, the environment, browsers you are experiencing difficulty with etc.

If you don't have the skills and you don't want to learn, then pay someone who does have them to do this task for you.

If you don't have the skills and you [!]do[/!] want to learn... might I suggest some of the online tutorials on implementing Google Maps as a good place to start your journey.

Jeff

[tt]Visit my blog [!]@[/!]

http://www.coderambler.com/

Visit Code Couch [!]@[/!]

http://www.codecouch.com/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

thewhistler1 · Nov 12, 2009

I write PHP not javascript and I just need a little assistance with this one thing. Yes I have tried things but I don't know the syntax to get it to work. I have also tried to research it and did not find anything. If someone could help with this I would greatly appreciate it.

BabyJeffy · Nov 13, 2009

Here is a good reference for all the cool stuff you can do with the Google Maps API:

http://code.google.com/apis/maps/documentation/reference.html

Moving on, I have rewritten one of the functions with more useful variable names - so it makes a little more sense. The key is to populate the 3 new variables with the data you want the map to centre on...

Code:

function initialize() {
	if (GBrowserIsCompatible()) {
		[!]var zoomLevel = 13;
		var latitude = 37.4419;
		var longitude = -122.1419;[/!]
		map = new GMap2(document.getElementById("map_canvas"));
		map.setCenter(new GLatLng([!]latitude[/!], [!]longitude[/!]), [!]zoomLevel[/!]);
		geocoder = new GClientGeocoder();
	}
}

How do you get those latitude and longitude numbers? Check out this excellent online tool:

http://www.gorissen.info/Pierre/maps/googleMapLocation.php

Hope that does the trick!

Cheers,
Jeff

[tt]Visit my blog [!]@[/!]

http://www.coderambler.com/

Visit Code Couch [!]@[/!]

http://www.codecouch.com/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

thewhistler1 · Nov 13, 2009

I appreciate the effort on that one, but how can I have a variable containing an address on the page and as soon as you load the page it looks at the address in that variable and centers the map on that? That is what I need to do. In the code I pasted there was one function that does that but I cant get it to load with that function. Instead it loads with the function that just has lat and long coordinates and then you have to click something to go to the address that you really want. So how can I get it to load the address in a variable onload?
Thanks

thewhistler1 · Nov 13, 2009

.....adding to last post

If I knew how to get the lat and long variables out of this function :

function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.closeInfoWindowHtml(address);
}
}
);
}
}

then I could easily use it in the following function to load the page with the correct address:

function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(33.450206, -112.073936), 9);
geocoder = new GClientGeocoder();
}
}

but that is my problem. Is there a way to return the lat and long variables from the first function to put into the second function? That should work I would think.

thewhistler1 · Nov 13, 2009

OK I got it. I found the following, modified it a little and it works great, just what I wanted it to do.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="[URL unfurl="true"]http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=KEY_GOES_HERE"[/URL]
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

   var geocoder;
   var map;

   var restaurant = "The Old Mohawk Restaurant";
   var address = "985 Chambers Blvd Bardstown Ky 40004";

   // On page load, call this function

   function load()
   {
      // Create new map object
      map = new GMap2(document.getElementById("map"));

      // Create new geocoding object
      geocoder = new GClientGeocoder();

      // Retrieve location information, pass it to addToMap()
      geocoder.getLocations(address, addToMap);
   }

   // This function adds the point to the map

   function addToMap(response)
   {
      // Retrieve the object
      place = response.Placemark[0];

      // Retrieve the latitude and longitude
      point = new GLatLng(place.Point.coordinates[1],
                          place.Point.coordinates[0]);

      // Center the map on this point
      map.setCenter(point, 15);
      map.setUIToDefault();

      // Create a marker
      marker = new GMarker(point);

      // Add the marker to map
      map.addOverlay(marker);

      // Add address information to marker
      marker.closeInfoWindowHtml(place.address);
   }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 400px; height: 300px"></div>
  </body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

using a variable in a google map script

thewhistler1

Technical User

BabyJeffy

Programmer

thewhistler1

Technical User

BabyJeffy

Programmer

thewhistler1

Technical User

thewhistler1

Technical User

thewhistler1

Technical User

Similar threads

Part and Inventory Search

Sponsor