I am in need of some assistance with Google Gecoding. What I want to
do is take address, city, state, and zip code values that are entered
into a form and have them geocoded then there values entered into a
MySQL database. I need this because on another form I need the Google
Maps JavaScript API v3 to pull the LatLng values from the database and
place markers everywhere there are coordinates for.
I have the following code done so far:
<!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>
<!-- Loads the Google Map JavaScript Map API -->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?
key=MYKEY&sensor=true">
</script>
<script type="text/javascript">
// Creates a Map Object so that map variables can be assigned.
var map;
var geocoder;
function initialize() {
// Organization's coordinates ( I want the variables below values
to be replaced with the MySQL db values)
$organizationLat = 38;
$organizationLng = -77;
// Contact's coordinates
$contactLat = 39;
$contactLng = -77;
// Create Geocoder
geocoder = new google.maps.Geocoder();
var organizationLatLng = new
google.maps.LatLng($organizationLat,
$organizationLng);
var contactLatLng = new google.maps.LatLng($contactLat,
$contactLng);
var myOptions = {
// Creates an initial point of reference
center: organizationLatLng,
// The larger the zoom number, the greater the zoom
zoom: 8,
// There are 4 map types: ROADMAP, SATELLITE, HYBRID, and
TERRAIN
mapTypeId: google.maps.MapTypeId.HYBRID
};
// Creates a JavaSript Map class and defines a single map on a
page that is specified to a particular div.
var map = new
google.maps.Map(document.getElementById("map_canvas"),
myOptions);
// Creates a marker for contact(s)
var marker2 = new google.maps.Marker({
position: organizationLatLng,
map: map,
title: "Contact name and address go here"
});
}
function codeAddress() {
var address = document.getElementById("address").value;
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
});
} else {
alert("Geocode was not successful for the
following reason: " +
status);
}
});
}
</script>
</head>
<!-- Loads the map on initialization -->
<body onload="initialize()">
<!--<div id="map_canvas" style="width:100%; height:100%"></div>-->
<div id="map_canvas" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Washington, D.C.">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
</html>
I am doing my testing on a local XAMPP installation. I would
appreciate any suggestions I need to make to the code to help me gain
the achieved goal. I am running a LAMP.
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
