Jump to content
  • 0

Как к селекту привязать координаты с google-карты?


alex_stepanow
 Share

Question

Есть такая вещь, на странице снизу есть google-карта, выше нее - селект с названиями горов, как сделать так чтобы выборе города из селекта на карте переходило на его координаты? как можно к option привязать координаты?

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Все довольно просто, подключаем стрипт

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

Далее вот такой скрипт:

<script type='text/javascript'>

var geocoder;

var map;

var infowindow = new google.maps.InfoWindow();

var marker;

function initialize() {

geocoder = new google.maps.Geocoder();

var latlng = new google.maps.LatLng(50.450070, 30.523268);

var mapOptions = {

zoom: 16,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP,

}

map = new google.maps.Map(document.getElementById('map'), mapOptions);

}

function codeLatLng() {

var input = document.getElementById('latlng').value;

var latlngStr = input.split(',', 2);

var lat = parseFloat(latlngStr[0]);

var lng = parseFloat(latlngStr[1]);

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

geocoder.geocode({'latLng': latlng}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

if (results[1]) {

map.setZoom(14);

marker = new google.maps.Marker({

position: latlng,

map: map

});

infowindow.setContent(results[1].formatted_address);

infowindow.open(map, marker);

} else {

alert('No results found');

}

} else {

alert('Geocoder failed due to: ' + status);

}

});

}

</script>

к body добавляем onload="initialize()", вот сам список:

<select id="latlng" onclick="codeLatLng()">

<option value="50.450070, 30.523268">Киев</option>

<option value="49.840363, 24.029796">Львов</option>

<option value="46.48486, 30.732694">Одесса</option>

<option value="50.013917, 36.231308">Харьков</option>

<option value="48.021161, 37.803726">Донецк</option>

</select>

и не забываем <div id='map'></div>.

Все готово:)

Link to comment
Share on other sites

  • 0

а если я кликну на select, но не изменю значение, координаты будут пересчитываться?

не совсем понял твой вопрос...

вот пример работы этого скрипта - http://trelad.com/new/index2.html

Link to comment
Share on other sites

  • 0
не совсем понял твой вопрос...

Это я намекаю на то, что у тебя пересчет координат codeLatLng() идет при каждом клике на select, даже если я не изменила значение. Здесь, как по мне, логичнее поставить onchange http://jsfiddle.net/caKpZ/. Но это так, бухчу по мелочи:)

Link to comment
Share on other sites

  • 0
не совсем понял твой вопрос...

Это я намекаю на то, что у тебя пересчет координат codeLatLng() идет при каждом клике на select, даже если я не изменила значение. Здесь, как по мне, логичнее поставить onchange http://jsfiddle.net/caKpZ/. Но это так, бухчу по мелочи :)

ну тогда да, в таком случае:

$("#latlng").on("change", function(){

var coords = $(this).val().split(",")

map.setCenter(new google.maps.LatLng(coords[0] , coords[1]));

})

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Bignoob
      Требуется сделать строку ввода в которые вписывается опреленная ссылка(любая) например:"https://htmlforum.org/forum/123" 
      Нужно, чтобы по нажатию кнопки в веденной ссылке менялась половина до опреденного домена типа org с того что было например на "https://123htmlsuper.ru/forum/123" .
      То есть не просто с org на ru, а полностью от https до слеша перед org
      Дальнейший вывод этой ссылки или кнопки для перехода на эту ссылку 
      Нужно это для сайта в "блокноте" html css
      Help
    • By AndreyCore
      При нажатии на кнопку в форме, сайт не перезагружается как нужно.
      В чем проблема?
      <div class ='div-form'> <h1>CALC</h1> <form id = 'myform'> <label for = 'inp-1'>Число 1</label> <input class = 'inp' id = 'inp-1' type ='text'></input> <br/><p></p> <label for = 'inp-2'>Число 2</label> <input class = 'inp' id = 'inp-2' type = "text"></input></form><br/> <input id = 'bu-end' type ='submit' value ="Суммировать"></input> <p class = 'sum' id = 'sum'>Сумма: <span class = 'sum-r' id = 'sum-r'></span></p> </form><hr/> </div>  
    • By marriavass
      Помогите, пожалуйста, понять как разместить footer поверх map.  Я начинающий верстальщик и не могу понять как решить данную задачу.  Я пробовала с отрицательным margin-top для footer, тогда он залазит на div и в Chrome и Safari все отлично, но Firefox все съезжает.
      <main>
      /*много других тегов*/
        <section class="modal-map">
      /*форма*/
           <div>  <iframe src="https://www.google.com></iframe> </div>
         </section>
      </main>
        <footer>     
       </footer>
        
    • By Marina_dolya
      Добрый день. 
      Помогите решить проблемку. В chrom и Opera
      <select>
      <option>100g</option>
      </select>
      у g обрезаeтся хвостик. 
       
    • By adminfilm
      Всем привет, при приближение или когда двигаешь мышкой по карте, маркеры передвигаются с тобой!
      Не могу найти ошибку, если поможете, буду благодарен)
       
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy