0

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

3
Contributors
3
Replies
14
Views
3 Years
Discussion Span
Last Post by almostbob
0

using Chrome, IE10, firefox, safari, the version in the op didnt centre on b2n 3p1 Canada, the marker appears screen right

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.