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

Следующий пример кода, представленный 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 местоположения без маркера. Мне было интересно, как я могу разместить маркер, задав параметры широты / долготы? И как можно хранить мою собственную информацию, извлеченную из базы данных на этом маркере?

Заранее спасибо! Любая помощь приветствуется.

  • Может ли JavaScript изменить значение CSS @page?
  • Неиспользуемый css - как вы его очищаете?
  • Blur () против onblur ()
  • Как получить GET и POST-переменные с помощью JQuery?
  • Какой keycode для клавиши escape с jQuery
  • Как я могу использовать Multi Media Uploader в плагинах WordPress?
  • Порядок итераций для циклов in.in в Javascript
  • CSS или JavaScript, чтобы выделить определенную область непрозрачности изображения
  • One Solution collect form web for “Как установить маркер карты Google по широте и долготе и предоставить информационный пузырь”

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

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

     <div id="map_canvas"></div> <a href='javascript:addMarker("usa")'>Click to Add USA</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 будет либо usa, brasil, либо argentina, и тогда мы создадим маркер на основе пройденного параметра. Если в функции 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; 
    JavaScript делает сайт умным, красочным и простым использованием.