Google Maps

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

LVL 58

GaryAsked: 2012-12-26

Who is Participating?

Solutions

LVL 58

GaryConnect With a Mentor Author Commented: 2012-12-26

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

LVL 38

Tom BeckCommented: 2012-12-26

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

LVL 58

GaryAuthor Commented: 2012-12-26

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

LVL 58

GaryAuthor Commented: 2012-12-26

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