I have done a simple GoogleMap which responses to script.php?q=canada and shows a map.
One problem is it always loads the map with the center var latlng = new google.maps.LatLng(34.052234,-118.243685); for a second and then loads the right map.
What's wrong with my code?
<!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><?=$_GET['q']?></title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(34.052234,-118.243685);
var address = '<?=$_GET['q']?>';
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
// autozoom
map.fitBounds(results[0].geometry.viewport);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: 'by Quick Maps',
clickable: false
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Sidequestion:
how to replace alert("Geocode was not successful for the following reason: " + status); with a simple message on the map?
2 Answers 2
1) The google map initializes to one location, then you tell it another. So you have 2 options:
a)Move the map instantiation into the geocode callback.
b)Initialize to the location you want. To do this you will need to read a bit more about how google maps works instead of just using their basic example.
2) As for the nice error message instead of the abrasive alert, add this to your html.
<p id="errorMessage" style="display:none;">Sorry, couldn't find that address</p>
Then display it instead of the alert.
} else {
// alert("Geocode was not successful for the following reason: " + status);
document.getElementById('errorMessage').style.display = "block";
}
Google maps does have some nice overlays in their latest versions, but it mostly surrounds locations and ranges of area on the map-- not general text info. So you see, you need to create your own UI outside of the map, on the HTML page above or below it. If you really want to show it on top of the map, you can set the following css properties on the errorMessage div:
#errorMessage {
position:absolute;
left: 50%;
top: 30%;
}
Comments
The quick answer is to move the map instantiation into the geocode callback.
geocoder.geocode( { 'address': address}, function(results, status) {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
...
});
That would prevent the map from displaying centered around 34.052234,-118.243685.
About the user experience when no results are returned, you could hide the map and display some text, for example?
document.getElementById('map_canvas').style.display = 'none';
document.getElementsByTagName('body')[0].innerHTML = 'Geocode was not successful for the following reason: " + status;
But what you want to do here should be highly dependent on the general user interface of your solution :)
1 Comment
results[0].geometry.location is a google.maps.LatLng object. You should be using results[0].geometry.location.lat() and results[0].geometry.location.lng() instead of .Pa and .Qa because those variables can change (and have).