Google Maps V3 несколько маркеров из адресов - PullRequest
Новая
       35

Google Maps V3 несколько маркеров из адресов

0 голосов
/ 14 октября 2011

Мне нужно знать, как добавить несколько маркеров на карты Google v3 с адресов.Я работаю над веб-сайтом, на котором есть список из 10 предприятий с указанием их адреса на странице и карты для их поиска.Я реализовал карту только для одной компании, но мне нужно знать, как реализовать несколько адресов, хранящихся в переменной с именем address1, ... 2, ... 3, ... 4.Ниже приведены мои коды для одного бизнеса: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiple Map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">  
var map;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);    
var address = '52+E+20th+St, New+York, NY';
var address1 = '42+E+29th+St, New+York, NY';
var address3 = '56+W+25th+St, New+York, NY';
var address4 = '26+W+21th+St, New+York, NY';

geocoder.geocode({'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: map, 
        position: results[0].geometry.location
    });
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
}); 
  }  
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:250px"></div>
</body>
</html>

1 Ответ

2 голосов
/ 14 октября 2011

Недавно сделал примерно то же самое: в приведенном ниже примере r содержит широту и долготу центра карты и список маркеров. У каждого маркера снова есть широта и долгота, некоторый текст для отображения маркера и индексная переменная для использования разных значков для каждого результата.

Несколько маркеров добавляются путем простого их создания и предоставления одного и того же экземпляра map. Библиотека карт достаточно умна, чтобы показать их все. 

var latlng = new google.maps.LatLng(r.dest.lat, r.dest.lng);
var myOptions = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
window.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

for (marker in r.markers)
{
    var m = r.markers[marker];
    var d = new google.maps.Marker({ position: new google.maps.LatLng(m.lat, m.lng),
                                     map: map,
                                     title: m.text,
                                     icon:"http://www.google.com/mapfiles/marker" + m.l + ".png" });
}
...