Solved

Update google map center with value from input box

Posted on 2015-02-11
5
78 Views
Last Modified: 2015-02-11
Hi
I have this code:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

   <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:12,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("map"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);

    function codeAddress() {
        alert("yes");
                  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);
                    }
                    else {
                      alert('Geocode was not successful for the following reason: ' + status);
                    }
                  });
                }

    </script>
</head>
<body>
      <input id="address" type="textbox">
      <input type="button" value="Geocode" onclick="codeAddress()">
 <style>

    #map {
        height: 500px;
        width: 800px;
        }

    </style>
          <div id="map"></div>

</body>
</html>

Open in new window


The map loads fine and centres on London but when I enter a place in the text field and hit enter it doesn't update the center of the map to the new location. What am I missing?

thanks
0
Comment
Question by:lz7cjc
  • 3
  • 2
5 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40602976
I see two issues.
1.) variable map is out of scope in the codeAddress function.
2.) the geocoder is not initialized.
<script>
	var map;
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:12,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  map=new google.maps.Map(document.getElementById("map"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);

    function codeAddress() {
        alert("yes");
		 var geocoder = new google.maps.Geocoder();
                  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);
                    }
                    else {
                      alert('Geocode was not successful for the following reason: ' + status);
                    }
                  });
                }

    </script>

Open in new window

0
 

Author Comment

by:lz7cjc
ID: 40603005
fantastic thanks
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40603022
Thanks for the points. Do you still need this other question solved?
http://www.experts-exchange.com/Web_Development/WebApplications/Q_28614101.html
0
 

Author Comment

by:lz7cjc
ID: 40603041
No...same one! Do you know how ? Can close it? I do have another one open on responsive design and resizing map, if you want to help me out on that?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40603321
You can just delete the question if there are no posts to it.

I'll take a look at the responsive design question.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now