I am using Google Maps API v3, I have a simple map with a few markers. I also have a pull down list. I need the least amount of code to make this work. I would like to select a marker in the pull down list and have the marker selected pan to it. I have tried everything as well as look online and I find things close, but nothing is working so far, very frustrated so far. Pls Help! here is the snippet:
I need to figure out how to make this work
<!DOCTYPE html> <!-- saved from url=(0014)about:internet -->
<html>
<head>
<script type="text/javascript"
src=";sensor=false">
</script>
<br>
<script>
var geocoder;
var directionsService;
var directionsDisplay;
//Start of code (above is framework)
function initialize() {
var myLatLng = new google.maps.LatLng(41.682, -100.103);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
//Map Framework above
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); //Map Options
//google.maps.event.addDomListener(document.getElementById('SelectList'),
// 'change', function() {}
//var mypos = document.getElementById('SelectList').value;
// Marker2 (Red - default marker color)
var latLng2 = new google.maps.LatLng(43.239316, -96.259241);
var contentString2 = '<div id="content">'+
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
var marker2 = new google.maps.Marker({
position: latLng2,
icon: src='.png',
//new google.maps.Size(42,68)
//size: (12, 10),
//position: mypos,
map: map,
title: "marker ...)" //hover
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map, marker2);
});
//moved 'SelectList' up toward top!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// End code for Marker 2
// Start of Marker3 (Yellow - marker color)
var latLng3 = new google.maps.LatLng(44.021778, -96.052417);
var contentString3 = '<div id="content">'+
var infowindow3 = new google.maps.InfoWindow({
content: contentString3
});
var marker3 = new google.maps.Marker({
position: latLng3,
icon: src='.png',
map: map,
title: "Marker ..."
});
google.maps.event.addListener(marker3, 'click', function() {
infowindow3.open(map, marker3);
});
// End for Marker 3
// Start of Marker4 (Green - marker color)
var latLng4 = new google.maps.LatLng(43.881690, -95.922869);
var contentString4 = '<div id="content">'+
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
var marker4 = new google.maps.Marker({
position: latLng4,
icon: src='.png',
map: map,
title: "marker ..."
});
google.maps.event.addListener(marker4, 'click', function() {
infowindow4.open(map, marker4);
});
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
google.maps.event.addListener(marker4, 'click', function() {
infowindow4.open(map, marker4);
});
// End code for Marker 3
});
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:80%; height:95%"></div>
<br>
<div style="position: absolute; right: 25px; top: 15px; padding: 10px 10px 10px 10px;">
<h3><u>Marker List by area</u></h3>
</div>
<br>
<div style="position: absolute; right: 25px; top: 165px; padding: 10px 10px 10px 10px;">
<form>
<fieldset>
<legend><b>Region 1</b></legend>
<p>
<label><b>Marker List</b></label>
<select id = "myList3">
<option value = "9">Marker 1</option>
<option value = "10">Marker 2</option>
<option value = "11">Marker 3</option>
<option value = "12">Marker 4</option>
</select>
</p>
</fieldset>
</form></div>
</body>
</html>
I am using Google Maps API v3, I have a simple map with a few markers. I also have a pull down list. I need the least amount of code to make this work. I would like to select a marker in the pull down list and have the marker selected pan to it. I have tried everything as well as look online and I find things close, but nothing is working so far, very frustrated so far. Pls Help! here is the snippet:
I need to figure out how to make this work
<!DOCTYPE html> <!-- saved from url=(0014)about:internet -->
<html>
<head>
<script type="text/javascript"
src="http://maps.googleapis./maps/api/js?key=mykey&sensor=false">
</script>
<br>
<script>
var geocoder;
var directionsService;
var directionsDisplay;
//Start of code (above is framework)
function initialize() {
var myLatLng = new google.maps.LatLng(41.682, -100.103);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
//Map Framework above
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); //Map Options
//google.maps.event.addDomListener(document.getElementById('SelectList'),
// 'change', function() {}
//var mypos = document.getElementById('SelectList').value;
// Marker2 (Red - default marker color)
var latLng2 = new google.maps.LatLng(43.239316, -96.259241);
var contentString2 = '<div id="content">'+
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
var marker2 = new google.maps.Marker({
position: latLng2,
icon: src='http://maps.google./mapfiles/kml/paddle/red-circle.png',
//new google.maps.Size(42,68)
//size: (12, 10),
//position: mypos,
map: map,
title: "marker ...)" //hover
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map, marker2);
});
//moved 'SelectList' up toward top!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// End code for Marker 2
// Start of Marker3 (Yellow - marker color)
var latLng3 = new google.maps.LatLng(44.021778, -96.052417);
var contentString3 = '<div id="content">'+
var infowindow3 = new google.maps.InfoWindow({
content: contentString3
});
var marker3 = new google.maps.Marker({
position: latLng3,
icon: src='http://maps.google./mapfiles/kml/paddle/ylw-circle.png',
map: map,
title: "Marker ..."
});
google.maps.event.addListener(marker3, 'click', function() {
infowindow3.open(map, marker3);
});
// End for Marker 3
// Start of Marker4 (Green - marker color)
var latLng4 = new google.maps.LatLng(43.881690, -95.922869);
var contentString4 = '<div id="content">'+
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
var marker4 = new google.maps.Marker({
position: latLng4,
icon: src='http://maps.google./mapfiles/kml/paddle/grn-circle.png',
map: map,
title: "marker ..."
});
google.maps.event.addListener(marker4, 'click', function() {
infowindow4.open(map, marker4);
});
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
google.maps.event.addListener(marker4, 'click', function() {
infowindow4.open(map, marker4);
});
// End code for Marker 3
});
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:80%; height:95%"></div>
<br>
<div style="position: absolute; right: 25px; top: 15px; padding: 10px 10px 10px 10px;">
<h3><u>Marker List by area</u></h3>
</div>
<br>
<div style="position: absolute; right: 25px; top: 165px; padding: 10px 10px 10px 10px;">
<form>
<fieldset>
<legend><b>Region 1</b></legend>
<p>
<label><b>Marker List</b></label>
<select id = "myList3">
<option value = "9">Marker 1</option>
<option value = "10">Marker 2</option>
<option value = "11">Marker 3</option>
<option value = "12">Marker 4</option>
</select>
</p>
</fieldset>
</form></div>
</body>
</html>
- 1 v3 example with dropdown to select markers – geocodezip Commented Sep 6, 2013 at 13:25
- @geocodezip - I realize this, however this doesn't solve my problems. If you view source, it doesn't follow exactly what I am doing. Please advise. I would like to know if I add something near the listener to link this or do I add something in the select tag (my options list). Not to mention if you copy this and paste in a editor it doesn't work... – Bob C Commented Sep 6, 2013 at 13:44
- It demonstrates the functionality you are looking for (without the zoom to marker, but that would be simple to add). If it doesn't help you, ignore it. II had hoped it would let you see what you needed to do. – geocodezip Commented Sep 6, 2013 at 14:28
- It does everything I need, however I can't find the actual code to perform the pull down event to the marker. I don't need to zoom to as it centers it (which is fine) I just need to know what code and where do I put it for linking the pulldown and the markers. Need help!!?? – Bob C Commented Sep 6, 2013 at 15:14
- The map needs to be like this warrenknjiru.webs./realestate.html but with a pulldown and not as links. – Bob C Commented Sep 6, 2013 at 15:48
1 Answer
Reset to default 2You need to store the markers elsewhere and identifiy them when the dropdown changes. Hook your dropdown like this: onchange="dropdownChanged()"
Your code should look like this:
<script >
var geocoder;
var directionsService;
var directionsDisplay;
var markers = [];
var map;
//Start of code (above is framework)
function initialize() {
var myLatLng = new google.maps.LatLng(41.682, -100.103);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
//Map Framework above
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); //Map Options
//google.maps.event.addDomListener(document.getElementById('SelectList'),
// 'change', function() {}
//var mypos = document.getElementById('SelectList').value;
// Marker2 (Red - default marker color)
var latLng2 = new google.maps.LatLng(43.239316, -96.259241);
var contentString2 = '<div id="content">';
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
var marker2 = new google.maps.Marker({
position: latLng2,
icon: src = 'http://maps.google./mapfiles/kml/paddle/red-circle.png',
//new google.maps.Size(42,68)
//size: (12, 10),
//position: mypos,
map: map,
title: "marker ...)" //hover
});
markers[10] = marker2;
google.maps.event.addListener(marker2, 'click', function () {
infowindow2.open(map, marker2);
});
//moved 'SelectList' up toward top!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// End code for Marker 2
// Start of Marker3 (Yellow - marker color)
var latLng3 = new google.maps.LatLng(44.021778, -96.052417);
var contentString3 = '<div id="content">';
var infowindow3 = new google.maps.InfoWindow({
content: contentString3
});
var marker3 = new google.maps.Marker({
position: latLng3,
icon: src = 'http://maps.google./mapfiles/kml/paddle/ylw-circle.png',
map: map,
title: "Marker ..."
});
markers[11] = marker3;
google.maps.event.addListener(marker3, 'click', function () {
infowindow3.open(map, marker3);
});
// End for Marker 3
// Start of Marker4 (Green - marker color)
var latLng4 = new google.maps.LatLng(43.881690, -95.922869);
var contentString4 = '<div id="content">';
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
var marker4 = new google.maps.Marker({
position: latLng4,
icon: src = 'http://maps.google./mapfiles/kml/paddle/grn-circle.png',
map: map,
title: "marker ..."
});
markers[12] = marker4;
google.maps.event.addListener(marker4, 'click', function () {
infowindow4.open(map, marker4);
});
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
google.maps.event.addListener(marker4, 'click', function () {
infowindow4.open(map, marker4);
});
// End code for Marker 3
}
function dropdownChanged()
{
var index = document.getElementById("myList3").value;
var marker = markers[index];
var position = marker.getPosition();
map.setCenter(position);
}
</script>
EDIT 2 ** Here is how you hook the select to dropdownChanged
<select id = "myList3" onchange="dropdownChanged();">
<option value = "9">Marker 1</option>
<option value = "10">Marker 2</option>
<option value = "11">Marker 3</option>
<option value = "12">Marker 4</option>
</select>
EDIT 1 * As per your ment below, if you want to update the position from the dropdown you can simply call a function directly from the dropdown panTo(x,y)
<script>
function panTo(x,y)
{
var position = new google.maps.LatLng(x,y);
map.setCenter(position);
}
</script>