admin管理员组文章数量:1026373
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>
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>
本文标签： javascriptGoogle Maps API dropdown listzoom to markerStack Overflow
版权声明：本文标题：javascript - Google Maps API dropdown list, zoom to marker - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745644047a2160919.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论