Hello, I have been working on this application for a bit and I feel like I am close but apparently I am not close enough.
Challenge: I need to be able to have the user input an address and click "Create Map". In the map that’s displayed, the user’s entry should be the center of the map.
Here is what I have thus far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Maps API</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
$(document).ready(function(){
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: "Kansas City, KS"}, function(results) {
var homeLatLng = results[0].geometry.location;
var mapOptions = {
//****************I tried to run it with this*****************//
//center: new google.maps.LatLng(lat, lng),
//zoom: 8,
//mapTypeId: google.maps.MapTypeId.ROADMAP
zoom: 4,
center: homeLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map").get(0), mapOptions);
$("#add_marker").click(function() {
if ($("#address").val() == "") {
alert("You must enter an address!");
}
else {
var address = $("#address").val();
geocoder.geocode({address: address}, function(results) {
var addressLatLng = results[0].geometry.location;
var marker = new google.maps.Marker({
position: addressLatLng,
map: map
});
});
}
});
});
});
</script>
</head>
<body>
<section>
Center Address: <input type="text" size="60" id="address">
<input type="button" value="Add Marker" id="add_marker">
<div id="map"></div>
</section>
</body>
</html>
When I run this application I get the marker I am looking for but it is not being centered. As I have commented out I did try the ((center: new google.maps.LatLng(lat, lng), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP)), with no avail.
Would someone point me in the right direction on how to get my marker centered correctly? I appreciate it & thank you in advance.
Here it is in the browser http://dianamagers.com/jQuery/marker/index.html
