Marker on Map from Drop Down list.

Marvin Divo

unread,

Jul 9, 2010, 9:09:26 AM7/9/10

to Google Maps JavaScript API v3

Hello,

Please could somebody help me with my code below.
I want to place a marker on a map according to the selected location
from drop down list.
When I hardcode the coordinates (commented line) it is working fine
but how can I make it dynamic?

Thanks in advance

The code:

<!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">
var map;
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 MarkerFromDDList (){
var location = document.getElementById("location").value;
// var myLatlng = new google.maps.LatLng(56.96073070463192,
24.078392486572266);
var myLatlng = new google.maps.LatLng(location);
startMarker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true,
title: 'Location 1'
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:600px; height:400px"></div>
<p>
<select onchange="MarkerFromDDList()" id="location">
<option value="None">-</option>
<option value="56.96073070463192, 24.078392486572266">Location
1</option>
<option value="59.96073070463192, 27.078392486572266">Location
2</option>
</select>
</p>
</body>
</html>

Rossko

unread,

Jul 10, 2010, 4:43:36 AM7/10/10

to Google Maps JavaScript API v3

> var myLatlng = new google.maps.LatLng(location);

Try feeding LatLng two numbers, instead of one string of digits with
spaces and commas in it.

> <option value="56.96073070463192, ...

You can probaby lose about 10 decimal places off of your numbers, that
one is defined to within a nanometre. Six places should do for most
real mapping applications.

Marvin Divo

unread,

Jul 12, 2010, 4:11:56 AM7/12/10

to Google Maps JavaScript API v3

1. Thanks Rossko, feeding LatLng two numbers helped...

var location = document.getElementById("location").value;

var lat=location.substr(0,10);
var lng=location.substr(11);
var myLatlng = new google.maps.LatLng(lat, lng);

<...>

<option value="56.9607307 24.0783924">Location 1</option>
<option value="59.9607307 28.0783924">Location 2</option>
</select>

2. I want to make title of the marker dynamic too. I'm not very good
in javascript... Any idea how to get 'Location 1' or 'Location 2' to
the javascript variable?

var markerTitle = document.getElementById("location").???????

Thanks.

Marx Zeng

unread,

Jul 12, 2010, 7:52:32 AM7/12/10

to Google Maps JavaScript API v3

You can try it.

<!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">

var locations = {};
locations['Location 1'] = new google.maps.LatLng(56.96073070463192,
24.078392486572266);
locations['Location 2'] = new google.maps.LatLng(59.96073070463192,
27.078392486572266);

var map;

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 MarkerFromDDList (){

var selected = document.getElementById("location").value;

startMarker = new google.maps.Marker({
position: locations[selected],
map: map,
draggable: true,
title: selected

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

<p>

<option value="Location 1">Location 1</option>
<option value="Location 2">Location 2</option>
</select>
</p>

</body>
</html>

Marvin Divo

unread,

Jul 12, 2010, 8:42:26 AM7/12/10

to Google Maps JavaScript API v3

1. Thanks Marx but it will not work in my scenario. You hardcoded
coordinates/labels in javascript...

but the content of the dropdown list is generated dynamically by the
server side script.

<option value="None">-</option>
<option value="56.9607307 24.0783924">Location 1</option>
<option value="59.9607307 28.0783924">Location 2</option>

2. So... the Question is still open:

I want to make title of the marker dynamic too. I'm not very good
in javascript... Any idea how to get 'Location 1' or 'Location 2' to
the javascript variable?
var markerTitle = document.getElementById("location").???????

<select onchange="MarkerFromDDList()" id="location">
<option value="None">-</option>
<option value="56.9607307 24.0783924">Location 1</option>
<option value="59.9607307 28.0783924">Location 2</option>
</select>

On Jul 12, 2:52 pm, Marx Zeng <marx.z...@gmail.com> wrote:
> You can try it.
> <skiped...>

Marvin Divo

unread,

Jul 12, 2010, 9:09:45 AM7/12/10

to Google Maps JavaScript API v3

There is a link to the example webpage:
http://id241076.appspot.com/marker_from_dropdown_list/

Rossko

unread,

Jul 12, 2010, 9:46:56 AM7/12/10

to Google Maps JavaScript API v3

> I want to make title of the marker dynamic too. I'm not very good
> in javascript... Any idea how to get 'Location 1' or 'Location 2' to
> the javascript variable?

It's a javascript question, not a Google Maps question. Nevertheless,
Google provide a search engine to help
http://www.google.com/search?q=javascript+get+option+text
and this result from there looks relevant
http://www.webdevelopersnotes.com/tips/html/getting_the_text_from_an_html_drop_down_selection_list.php3

Marx Zeng

unread,

Jul 12, 2010, 9:54:40 AM7/12/10

to Google Maps JavaScript API v3

Try this.

function MarkerFromDDList (){

var location = document.getElementById("location").value;

var lat=location.split(",")[0];
var lng=location.split(",")[1];

var myLatlng = new google.maps.LatLng(lat, lng);

startMarker = new google.maps.Marker({

position: myLatlng,
map: map,
draggable: true,

// title now is hardcoded. How to make it dynamic from Drop Down List?
title: location.split(",")[2]
});

<option value="56.9607307,24.0783924,Location 1">Location 1</
option>
<option value="59.9607307,28.0783924,Location 2">Location 2</
option>
</select>

geoco...@gmail.com

unread,

Jul 12, 2010, 10:04:55 AM7/12/10

to Google Maps JavaScript API v3

On Jul 12, 6:09 am, Marvin Divo <pasn...@gmail.com> wrote:
> There is a link to the example webpage:http://id241076.appspot.com/marker_from_dropdown_list/

As Rossko said, not a maps question, a javascript/dhtml question.
Mike Williams has a sample with a dropdown menu in his v2 tutorial:
The Basics - Part 15 Lots of sidebar entries
http://econym.org.uk/gmap/basic15.htm

using an attribute:
http://www.geocodezip.com/marker_from_dropdown_listA.html

using the text of the option:
http://www.geocodezip.com/marker_from_dropdown_listB.html

-- Larry

> > > > > real mapping applications.- Hide quoted text -
>
> - Show quoted text -

Marvin Divo

unread,

Jul 12, 2010, 10:34:35 AM7/12/10

to Google Maps JavaScript API v3

Yes! It's exactly what I needed. Thanks.

var a = document.getElementById("location").selectedIndex;
var markerTitle =
document.getElementById("location").options[a].text;

> http://www.webdevelopersnotes.com/tips/html/getting_the_text_from_an_...

Marx Zeng

unread,

Jul 12, 2010, 10:36:31 AM7/12/10

to Google Maps JavaScript API v3

Try this.
http://marx-tseng.appspot.com/maps/Marker_From_Select.html

> http://www.webdevelopersnotes.com/tips/html/getting_the_text_from_an_...

Marvin Divo

unread,

Jul 12, 2010, 10:53:56 AM7/12/10

to Google Maps JavaScript API v3

Many thanks to everyone... The problem is solved :)

On Jul 12, 5:36 pm, Marx Zeng <marx.z...@gmail.com> wrote:
> Try this.http://marx-tseng.appspot.com/maps/Marker_From_Select.html

Reply all

Reply to author

Forward