google map not displaying centred

hi

I'm probably going about this in a very overcomplicated way but I'm after a way of giving my page a map image based on an address, in the example below: var postcode = 'Sellindge Village Hall, Main Road, Sellindge, uk;

I'm really short on time so would really love someone to be able to give me a working example of this please (basically whats below, just working) :)

Many thanks

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

				<div id="map" style="width: 400px; height: 250px;"></div>

				<script type="text/javascript">



				          function getPosition(callback) {
				            var geocoder = new google.maps.Geocoder();
				            var postcode = 'Sellindge Village Hall, Main Road, Sellindge, uk';

				            geocoder.geocode({'address': postcode}, function(results, status)
				            {
				              if (status == google.maps.GeocoderStatus.OK)
				              {
				                callback({
				                  latt: results[0].geometry.location.lat(),
				                  long: results[0].geometry.location.lng()
				                });
				              }
				            });
				          }

				          function setup_map(latitude, longitude) {
				            var _position = { lat: latitude, lng: longitude};

				            var mapOptions = {
				              zoom: 14,
				              scrollwheel: false,
				              center: _position
				            }

				            var map = new google.maps.Map(document.getElementById('map'), mapOptions);

				            var marker = new google.maps.Marker({
				              map: map,
							position: results[0].geometry.location
				            });
				          }

						  getPosition(function(position){
							setup_map(position.latt, position.long);
						  });







      </script>

Open in new window

LVL 3
Neil ThompsonSenior Systems DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
The only problem I see with that code is that the marker is not showing up. That's because the coordinates are not valid. You need to pass in a google.maps.LatLng() object (line 41 below).
<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head> 
<body>
				<div id="map" style="width: 400px; height: 250px;"></div>

				<script type="text/javascript">
				          function getPosition(callback) {
				            var geocoder = new google.maps.Geocoder();
				            var postcode = 'Sellindge Village Hall, Main Road, Sellindge, uk';

				            geocoder.geocode({'address': postcode}, function(results, status)
				            {
				              if (status == google.maps.GeocoderStatus.OK)
				              {
				                callback({
				                  latt: results[0].geometry.location.lat(),
				                  long: results[0].geometry.location.lng()
				                });
				              }
				            });
				          }

				          function setup_map(latitude, longitude) {
				            var _position = { lat: latitude, lng: longitude};

				            var mapOptions = {
				              zoom: 14,
				              scrollwheel: false,
				              center: _position
				            }

				            var map = new google.maps.Map(document.getElementById('map'), mapOptions);

				            var marker = new google.maps.Marker({
				              map: map,
							position: new google.maps.LatLng(_position.lat, _position.lng)
				            });
				          }

						  getPosition(function(position){
							setup_map(position.latt, position.long);
						  });

      </script>
</body> 
</html>

Open in new window

0
Neil ThompsonSenior Systems DeveloperAuthor Commented:
thanks Tom

I'm still getting this though (using the code from your snip above), if I pull the map over the pin is now there though but it never shows the full map

map2
0
Tom BeckCommented:
I cannot recreate that problem. Does the problem show up in this jsfiddle version?

http://jsfiddle.net/w0srbsvL/1/

At the bottom of the code you will see this line commented out.

google.maps.event.trigger(map, "resize");

If you google "google map not displaying fully" or something similar, that line of code is the suggested solution.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Neil ThompsonSenior Systems DeveloperAuthor Commented:
Thanks Tom

I'm at home now but the fiddle is perfect so ill give it a try tomorrow.

Weirdly just before I left I opened up IE Developer tools to inspect the map div and all of a sudden my off centre map was perfect, closed dev tools and shot off the side again.

Weird.
0
Tom BeckCommented:
Opening up dev tools causes a resize of the map, a good indication that adding the resize line suggested will solve the problem for you.
0
Neil ThompsonSenior Systems DeveloperAuthor Commented:
Thanks Toms

I've tried your code and it works perfectly outside the page, just not in it.

It's located at  
http://www.shepway.gov.uk/webapp/myshepway/index.php?uprn=50034527

click on the "your councillor" tab, it just goes off the screen for some reason, if you pull it slightly down and to the right you can see the pin, additionally now the map doesn't even show which is weird, just the satellite view
0
Tom BeckCommented:
It sure helps when you provide a link to the page. You did not mention that the map was on a section of content that is initially hidden.

I have to say, it was not a pleasant experience troubleshooting this problem. You have javascript code snippets and css snippets scattered everywhere. You have a </head><body> tag pair in the middle of the page.

I struggled with trying to modify the code that affects the tab changes so I could demonstrate the cause of the problem but was frustrated that my changes to the tab code had NO affect on the page. Then I finally realized that you had inexplicably duplicated the tab changing code lower on the page and that the second instance was overriding the first. Yikes!

Anyway, find the SECOND instance of the tab changing code on your page and temporarily change the tab that loads initially from 0 to 2 (the tab with the map).
$("ul.tabs1 li").eq(2).addClass("active").show(); //Activate first tab
		$(".tab_content1").eq(2).show(); //Show first tab content
		$("ul.tabs1 li").eq(2).css("background-color", "black");

Open in new window

You see now that the map displays just fine. This is because Google maps cannot display a map in a container that is initially hidden. The "resize" trick is useless to you here. You will need to create the map when the content that includes the map is visible rather than on page load.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Neil ThompsonSenior Systems DeveloperAuthor Commented:
Tom, you are a star. Thank you.

I'll look at the code on the page, its literally just being copied form the old site to new site so some of the template has obviously been excitedly added :)

Kind regards
Neil
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.