Как установить маркер карты Google по широте и долготе и предоставить информационный пузырь

Question

Следующий пример кода предоставлен google maps api

          var geocoder;
          var map;
          function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(40.77627, -73.910965);
            var myOptions = {
              zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          }

ниже приведена только карта Google местоположения без маркераМне было интересно, как я могу разместить маркер, задав параметры широты / долготы?И как можно хранить мою информацию, извлеченную из базы данных на этом маркере?

Answer 1

Вот демоверсия JSFiddle , которая показывает, как установить маркер карты Google по Lat Lng, а также когда щелчок даст вам информационное окно (пузырь):

Вот наш основной HTML с 3 гиперссылками, при нажатии на которые добавляется маркер на карту:

<div id="map_canvas"></div>

<a href='javascript:addMarker("usa")'>Click to Add U.S.A</a><br/>
<a href='javascript:addMarker("brasil")'>Click to Add Brasil</a><br/>
<a href='javascript:addMarker("argentina")'>Click to Add Argentina</a><br/>

Сначала мы устанавливаем 2 глобальные переменные. один для карты, а другой массив для хранения наших маркеров:

var map;
var markers = [];

Это наша инициализация создания карты Google:

function initialize() {
    var latlng = new google.maps.LatLng(40.77627, -73.910965);
    var myOptions = {
        zoom: 1,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

Затем мы создаем 3 локации, где мы хотели бы разместить наши маркеры:

var usa = new google.maps.LatLng(37.09024, -95.712891);
var brasil = new google.maps.LatLng(-14.235004, -51.92528);
var argentina = new google.maps.LatLng(-38.416097, -63.616672);

Здесь мы создаем функцию для добавления наших маркеров, основываясь на том, что на нее передается. myloc будет сша, Бразилия или Аргентина, и затем мы создадим маркер на основе переданного параметра. С помощью функции addMarker мы проверяем и проверяем, чтобы мы не создавали дубликат маркера на карте, вызывая цикл for, и если переданный нами параметр уже создан, мы возвращаемся из функции и ничего не делаем, в противном случае мы создаем маркер и вставьте его в массив глобальных маркеров. После того, как маркер создан, мы затем прикрепляем информационное окно к соответствующему маркеру, выполняя markers[markers.length-1]['infowin'] markers.length-1, просто получая только что перемещенный маркер в массиве. В информационном окне мы устанавливаем контент, используя HTML. В основном это информация, которую вы помещаете в всплывающее окно или информационное окно (это может быть информация о погоде, которую вы можете заполнить с помощью API погоды и т. Д.). После того, как информационное окно прикреплено, мы присоединяем прослушиватель событий onclick, используя addListener API Google Map, и при щелчке по маркеру мы хотим открыть информационное окно, которое связано с ним, вызывая this['infowin'].open(map, this), где карта - наша глобальная карта является маркером, с которым мы в настоящее время связываем событие onclick.

function addMarker(myloc) {
    var current;
    if (myloc == 'usa') current = usa;
    else if (myloc == 'brasil') current = brasil;
    else if (myloc == 'argentina') current = argentina;
    for (var i = 0; i < markers.length; i++)
    if (current.lat() === markers[i].position.lat() && current.lng() === markers[i].position.lng()) return;

    markers.push(new google.maps.Marker({
        map: map,
        position: current,
        title: myloc
    }));

    markers[markers.length - 1]['infowin'] = new google.maps.InfoWindow({
        content: '<div>This is a marker in ' + myloc + '</div>'
    });

    google.maps.event.addListener(markers[markers.length - 1], 'click', function() {
        this['infowin'].open(map, this);
    });
}

Когда все сделано, мы в основном присоединяем событие window.onload и вызываем функцию initialize:

window.onload = initialize;