How to pass value (coordinates) from drop down list to the map?

Futsutsuka

unread,

Nov 11, 2010, 11:10:11 AM11/11/10

to Google Maps JavaScript API v3

I would like users to select city from dropdown menu and using
Javascript API V3 pass data to my map so that map will be zoomed in
choosen location.
Say map is loaded by default on USA level. User selects "New York"
from drop down list and map is zoomed to New York.
Thanks for help.

Rossko

unread,

Nov 11, 2010, 11:16:33 AM11/11/10

to Google Maps JavaScript API v3

> I would like users to select city from dropdown menu and using
> Javascript API V3 pass data to my map so that map will be zoomed

See your previous post.
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/ef0b1088a8f23d83/cce0a54fc096d3a9
If the answer there didn't help, it would be useful to say why not, or
else you are likely to get the same answer when reposting the same
question.

Futsutsuka

unread,

Nov 12, 2010, 12:01:12 PM11/12/10

to Google Maps JavaScript API v3

Sorry, didn't see that the post was posted :(((( Troubles with
internet connection and reloaded browser.
Well, meanwhile figured out how to do it, maybe someone will use it.
This how I did ad it works:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">

function initialize() {
var latlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function selectedLocation() {
var selected = document.getElementById("location").value;
if (selected == "Location 1") {
var location1 = new google.maps.LatLng(48.017, 37.914);
map.setCenter(location1);
map.setZoom(12);

}
else if (selected == "Location 2") {
var location2 = new google.maps.LatLng(50.269, 28.665);
map.setCenter(location2);
map.setZoom(12);

}
}

</script>
</head>
<body onload="initialize()">

<p>
<form action="#" >
<select onchange="selectedLocation()" id="location">
<option value="None">-</option>
<option value="Location 1">Location 1</option>
<option value="Location 2">Location 2</option>
</select>

</form>
</p>
<div id="map_canvas" style="width:600px; height:400px"></div>
</body>
</html>

On 11 Лис, 18:16, Rossko <ros...@culzean.clara.co.uk> wrote:
> > I would like users to select city from dropdown menu and using

> > Javascript API V3passdata to my map so that map will be zoomed
>
> See your previous post.http://groups.google.com/group/google-maps-js-api-v3/browse_thread/th...

Reply all

Reply to author

Forward