如何将两个位置添加到同一个网站的谷歌地图中

How can I add two locations into same google map for website

本文关键字：同一个 添加 网站 谷歌地图 位置 两个      更新时间：2023-09-26

我正在努力在同一个谷歌地图上包括两个位置。在这里，我已经包括了一个位置，我如何才能包括另一个纬度和经度为51.626778、0.513829的位置。若我包含了和我们之前的印度地址相同的内容，通过添加纬度和经度的逗号，这是行不通的。下面是我的JS和HTML

我已经使用API集成了谷歌地图"http://maps.google.com/maps/api/js?sensor=false"

HTML:<div id="Map"></div>

CSS：#map{ width:100%; height:450px;}

JS:

var locations = [
    ['<div class="infobox"><h3 class="title"><a href="#contact">OUR INDIA ADDRESS</a></h3></div></div></div>',  12.996868, 80.209891, 2]
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
        scrollwheel: false,
        navigationControl: true,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false,
        styles: [ { "stylers": [ { "hue": "#ff6501" },  {saturation: 20},
            {gamma: 1} ] } ],
        center: new google.maps.LatLng( 12.996868, 80.209891),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        map: map ,
        icon: 'images/marker1.png'
        });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

请指导我，谢谢你的帮助。

编辑：是，以相同的方式同时显示多个位置，带有标记

您的位置变量应该是这样的

   var locations = [ ['OUR INDIA ADDRESS', 12.996868, 80.209891, 2],['OUR INDIA ADDRESS', 51.626778, 0.513829, 2]]

在下面的例子中，它清楚地展示了如何在地图中添加多个位置。这是一个示例，您可以在其中添加多个标记图标，点击后我们可以放置一个标记，并在信息窗口中显示地址。

<script>
var locations = [
       ['Hyderabad', 17.38504, 78.48667],
       ['Chennai', 13.08268, 80.27072],
       ['Bangalore', 12.97160, 77.59456],
       ['Mumbai', 19.07598, 72.87766],
       ['Pune', 18.52043, 73.85674]
];
var Hyderabad = new google.maps.LatLng(17.38504, 78.48667);
var Chennai = new google.maps.LatLng(13.08268, 80.27072);
var Bangalore = new google.maps.LatLng(12.97160, 77.59456);
var mumbai = new google.maps.LatLng(19.07598, 72.87766);
var map = null;
function initialize() {
    var mapProp = {
        center: Hyderabad,
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    for (var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            content: locations[i][0]
        });
        var infowindow = new google.maps.InfoWindow({
            content: locations[i][0]
        });
        marker.setMap(map);
    }
    var geocoder = new google.maps.Geocoder;
    var infowindow = new google.maps.InfoWindow;
    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);
        geocodeLatLng(geocoder,map,infowindow,event.latLng)
    });
}
function placeMarker(location) {
    debugger;
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true
    });
    //var infowindow = new google.maps.InfoWindow({
    //    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
    //});
    //infowindow.open(map, marker);
    //geocodeLatLng(geocoder,map,infowindow);
}
function geocodeLatLng(geocoder, map, infowindow, latlang) {
    debugger;
    //var input = latlang;
    //var latlngStr = input.split(',', 2);
    var latlng = { lat: parseFloat(latlang.lat()), lng: parseFloat(latlang.lng()) };
    geocoder.geocode({'location': latlng}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                //map.setZoom(11);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                infowindow.setContent(results[1].formatted_address);
                infowindow.open(map, marker);
            } else {
                window.alert('No results found');
            }
        } else {
            window.alert('Geocoder failed due to: ' + status);
        }
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

您的代码可以正常工作。只需在数组中创建一个新项目：

var locations = [ 
    ['OUR INDIA ADDRESS', 12.996868, 80.209891, 2],
    ['OUR INDIA ADDRESS 2', 12.976868, 80.209891, 2]
];

你举的例子[51.6267780.513829]的坐标在欧洲。

请参阅工作：http://jsfiddle.net/adrianogodoy/325ukwsg/2/

相关文章：