How do I change the position on the map each time the user clicks a link?

Question

How do I change the position on the map each time the user clicks a link?

Navigation

#1 by (4 votes)
#2 by (3 votes)

2

I need to display a map and just below would have a list with multiple addresses and when clicking on each address would be marked in Google Maps the place. I have researched the net but found nothing that I could base.

javascript google-maps

asked by anonymous 16.01.2015 / 01:52

2 answers

4

One way is to define latitude and longitude with data-* attributes. You can have a <a> element with the following markup:

<a href='#' data-latitude='-xx.xxx' data-longitude='-yy.yyy'>Endereço, 123</a>

Using JavaScript you can get both of these information. A simple example, with jQuery:

$('a').on('click', function(){
   var lat = $(this).data('latitude'),
       lon = $(this).data('longitude');

       alert("Latitude: " + lat + ". Longitude: " + lon);
});

And then create a new location for Google Maps.

meuMapa.panTo(new google.maps.LatLng(lat,lon));

Following is a sample code:

$(function () {
  
  var $map = $("#map-view").get(0),
 
  // latitude e longitude inicial
  latlon = new google.maps.LatLng(28.617161,77.208111);
  
  var gmap = new google.maps.Map($map, {
    center: latlon,
    zoom: 10
  });
  
  var marker = new google.maps.Marker({
    position: latlon,
    map: gmap,
    title: 'Rajya Sabha'
  });
                
  
  $('.map-nav a').on('click', function(){
    var lat = $(this).data('lat'),
        lon = $(this).data('lon');
    
    // obtem a nova latitude/longitude
    var newLatLon = new google.maps.LatLng(lat,lon);
    
    gmap.panTo(newLatLon); // muda a posição do mapa pra nova localização
    marker.setPosition(newLatLon); // altera a posição do marcador
    marker.setTitle($(this).html()) // altera o título do marcador
  });
});

/* Somente para melhorar a visualização */
#map-view{ width: 100%; height: 250px }
.map-nav {width: 100%; background: #333; padding: 8px 0; text-align:center}
.map-nav a{ text-decoration: none; color: #fff;margin: 0 15px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script><scriptsrc='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><navclass='map-nav'><ahref='#'data-lat='-3.11903'data-lon='-60.02173'>Manaus,AM</a><ahref='#'data-lat='-25.42895'data-lon='-49.26714'>Curitiba,PR</a><ahref='#'data-lat='-12.97304'data-lon='-38.50230'>Salvador,BA</a></nav><divid='map-view'></div>

Data Attributes [W3C]
Data Attributes [MDN]

16.01.2015 / 13:09

Update to 2 tables Modify XML features through Java

score 3 · Accepted Answer

This is an example of a basic map that is part of Google Maps documentation >:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script><script>varmap;functioninitialize(){varmapOptions={zoom:8,center:newgoogle.maps.LatLng(-34.397,150.644)};map=newgoogle.maps.Map(document.getElementById('map-canvas'),mapOptions);}google.maps.event.addDomListener(window,'load',initialize);</script></head><body><divid="map-canvas"></div>
  </body>
</html>

This code creates a map object, of type google.maps.Map . To change the center, just call the setCenter of this object, passing latitude and logitude. These values can be defined:

As a google.maps.LatLng :

var posicao = new google.maps.LatLng(-35, 151);

Or as a literal object:

var posicao = {lat: -34, lng: 151};

With this, just move the position to center:

map.setCenter(posicao);