Solved

Google Maps

Posted on 2012-12-26
6
207 Views
Last Modified: 2013-02-18
I'm using the following to get a Google map based on the address but it has stopped working - 204 No Content is returned (404)
Has anything changed in the past month?
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

Open in new window


function initialize() {
	if($("#address1").val()!="" && $("#city").val()!="" && $('[name="country"]').val()!=""){
		map = new google.maps.Map(document.getElementById('map_canvas'), {
			mapTypeId: google.maps.MapTypeId.ROADMAP
		});
		mapGeo = new google.maps.Geocoder();
		mapGeo.geocode({'address': 'Europe'}, function (results, status) {
			var ne = results[0].geometry.viewport.getNorthEast();
			var sw = results[0].geometry.viewport.getSouthWest();
			map.fitBounds(results[0].geometry.viewport);               
		});
		
		codeAddress()
	}
	else{
		alert("Please enter your street address, city and country on the Property Details tab")
	}
}

Open in new window

0
Comment
Question by:Gary
  • 4
6 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38721892
Nothing has changed with the Google Maps API if that's what you mean.

I have a working mock up using the code you provided, plus my version of the codeAddress function.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/javascript">
var map, mapGeo;
function initialize() {
	if($("#address1").val()!="" && $("#city").val()!="" && $('[name="country"]').val()!=""){
		map = new google.maps.Map(document.getElementById('map_canvas'), {
			mapTypeId: google.maps.MapTypeId.ROADMAP
		});
		mapGeo = new google.maps.Geocoder();
		mapGeo.geocode({'address': 'USA'}, function (results, status) {
			var ne = results[0].geometry.viewport.getNorthEast();
			var sw = results[0].geometry.viewport.getSouthWest();
			map.fitBounds(results[0].geometry.viewport);               
		});
		
		codeAddress()
	}
	else{
		alert("Please enter your street address, city and country on the Property Details tab")
	}
}

function codeAddress() {
   var centerMap;
   var address = $('#address1').val() + ',' + $('#city').val() + ',' + $('#country').val();
   mapGeo.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
		 centerMap = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
		 map.setCenter(centerMap);
		 map.setZoom(13);
		 
         var staticMarker = new google.maps.Marker({
    		position: centerMap,
    		map: map,
    		title:"Static Marker"
         });
      } else {
         alert("Geocode was not successful for the following reason: " + status);
      }
   });   
}
</script>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 500px;width:700px }
</style>
</head>
<body>
<div id="map_canvas"></div>
<label for="address1">Address:</label>
<input type="text" id="address1" title="Address" />
<label for="city">City:</label>
<input type="text" id="city" title="City" />
<label for="country">Country:</label>
<input type="text" id="country" name="country" />
<input type="button" onClick="initialize()" id="inputButtonGeocode" style="width:150px" title="Click to Geocode" value="Click to Geocode">
</body>
</html>

Open in new window

0
 
LVL 58

Author Comment

by:Gary
ID: 38722198
Exact same code as I have except I had map.checkResize() at the end
Removing this and now it works again. I think this was a remnant from when the map was created even though it wasn't visible
0
 
LVL 58

Author Comment

by:Gary
ID: 38722210
Ahh that is why i need map.checkResize(), because if you leave the tab and come back to it, maybe because of a change of address then it doesn't resize the map correctly - so it's not solved
0
 
LVL 58

Accepted Solution

by:
Gary earned 0 total points
ID: 38722322
Finally solved it
title:""
});
google.maps.event.trigger(map, 'resize'); //add this
map.setCenter(centerMap);// and move this here
$("#latitude").val(results[0].geometry.location.lat());
$("#longitude").val(results[0].geometry.location.lng());

Open in new window

0
 
LVL 58

Author Closing Comment

by:Gary
ID: 38901068
Solved myself
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
html input 8 44
jquery check value of radiobutton and checkboxlist 3 30
Html input text color the frame line 2 22
Responsive Font Size 6 31
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 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