How to Open a Map with address on JSP?

Guevara

unread,

Jun 1, 2010, 11:47:34 PM6/1/10

to Google Maps JavaScript API v3

Hello!
I need to load a map from data from the database and display in jsp,
this is my code:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById("address").value;
if (geocoder) {
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);
}
});
}
var latlng = new google.maps.LatLng(-22.9035393, -43.2095869);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body id="home" onload="initialize()">

<div id="map_canvas" style="width: 620px; height: 380px;"></div>
<input id="address" type="text" value="${home.address }, ${home.city},
${home.country}">
</div>
<div>
</body>

As you can see, I'm using "Expression Language" to capture the data.
The code is too bad, because it goes to rio de janeiro then go to the
correct address, how do I get direct to the address that is in
Expression Language??
Thanks!!!

Miguel Angel Vilela

unread,

Jun 2, 2010, 4:05:46 AM6/2/10

to google-map...@googlegroups.com

Hi,

You have no obligation to create the map before receiving the geocoding response, so you can do:

var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById("address").value;
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK) {

var myOptions = {

zoom: 15,
center: results[0].geometry.location,

       mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}

I have neither tested this code nor taking my morning dose of caffeine yet, but I think you get the idea: wait for the geocoder result to initialize the map. If the geocoding fails, you can fall back to a map at Rio, user's location or wherever you like.

Cheers,

Miguel

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Guevara

unread,

Jun 2, 2010, 1:19:46 PM6/2/10

to Google Maps JavaScript API v3

Works Miguel! =)
I'm using and I added the InfoWindow to:

var infowindow = new google.maps.InfoWindow({
content: '${home.address}, ${home.title}, R$:${home.price} '

});

infowindow.open(map, marker);

Than you!! \o/

> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2Bunsu...@googlegroups.com>
> > .

Reply all

Reply to author

Forward