I tried to ‘imitate’ the code from this map:
https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple
only changing Syney to Porto Alegre (in the form value and the coordinates as well). But something went wrong because the map-canvas isn’t showing on the screen. I checked the code and didn’t find any typo or syntax mistake.
I hope that someone can help. Actually I’m more used with Fusion Tables than Google Maps API.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>GEOCODER</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-30.027704, -51,228735);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
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);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Porto Alegre, Brasil">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
</html>
You may have swapped two lines, causing a syntax error. If you would check your JavaScript console, you would see the error message. You really should do that when JS doesn’t do what you expect it to do (or, for that matter, pretty much always, just to make sure there aren’t any unexpected mistakes).
Where you have this:
You want this: