Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Update google map center with value from input box

Posted on 2015-02-11
5
Medium Priority
?
97 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

715 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