Google Maps V3: Loading infowindow content via AJAX
What is the best way to load content into my infowindow using ajax? Right now I am getting a similar effect using iframes but I am not that that happy with it. I thought this would be straight forward but its confusing me for some reason. This is how its working right now:
var markers = [];
var infowindow = new google.maps.InfoWindow();
$.each(JSON.parse(aulas), function(i, a){
var latlng = new google.maps.LatLng(a.aula.lat, a.aula.lng);
var marker = new google.maps.Marker({
position : latlng,
title: a.aula.title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent("<div class='infowindow_content'><iframe开发者_Go百科 src='aulas/show/" + a.aula.id + "'></iframe</div>");
infowindow.open(map, marker);
});
markers.push(marker);
});
It would be easy to grab the content via ajax just before the infowindow.setContent call, but I want to make the ajax call only when the infowindow opens. Any thoughts?
BTW: I am using jQuery.
As was suggested in the answer I decided to move the calls to setContent and open to a separate function. For those interested the code that solved this was:
function load_content(marker, id){
$.ajax({
url: 'aulas/show/' + id,
success: function(data){
infowindow.setContent(data);
infowindow.open(map, marker);
}
});
}
Then change the listener:
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
load_content(marker, a.aula.id);
});
markers.push(marker);
});
You can call infowindow.setContent at any point after the info window has been shown. So you could initially set your info window content with a spinner, make the AJAX call (from the event handler) and then call infowindow.setContent again from the AJAX response with the appropriate data.
for (var i = 0; i < markersClient.length; i++) {
var location = new google.maps.LatLng(lats[i], longs[i]);
var marker = new google.maps.Marker({
position: location,
map: map,
lid: markersClient[i].t
});
var infowindow = new google.maps.InfoWindow({
content: ""
});
//debugger;
marker.setTitle(" - ");
markers.push(marker);
google.maps.event.addListener(marker, 'click', function (target, elem) {
infowindow.open(map, marker);
$.ajax({
success:function () {
infowindow.setContent(contentString);
}
});
intitalize map , marker , infowindow(as no content) and on marker 's click handler make ajax request
Already the content to the infoWindow is loaded but there are possibility if you are uploading images of large size then we have to wait for the first time to load the image fully and then set the content of infowindow and then display that infowindow. The solutions to the above requirement is ok but for images it might not get loaded instantly so to do that you have to check whether the content of the infowindow is loaded or not then only you have to display the info window.
10 years later... This loads pins via ajax and then each pin has an info window via ajax. Here is a working example: https://gmap.tarekadam.com and here is a repo https://github.com/tarekadam/gmap
This code will work when you add your google key and provide url(s) for pin json.
<html>
<head>
<title>gmap</title>
<script src="//maps.google.com/maps/api/js?key=YOUR-KEY-GOES-HERE"></script>
<script src="//code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
$().ready(function () {
let pinsets = [
'/one_source_of_pins.json',
'/another_source_of_pins.json'
];
var map = new google.maps.Map(document.getElementById("map"), {
center: {lat: -34.397, lng: 150.644},
zoom: 2.5
});
var infowindow = new google.maps.InfoWindow({
content: ""
});
for (let i = 0; i < pinsets.length; i++) {
let pinset = pinsets[i];
$.ajax({
type: "GET",
url: pinset,
success: function (data) {
for (let ii = 0; ii < data.length; ii++) {
let datum = data[ii];
let marker = new google.maps.Marker({
position: new google.maps.LatLng(datum.lat, datum.lng),
map: map,
icon: '//thebackoffice.github.io/pins/'
.concat(datum.icon)
.concat('.png')
});
google.maps.event.addListener(marker, 'click', function (target, elem) {
infowindow.open(map, marker);
infowindow.setContent('Loading...');
$.ajax({
type: "GET",
url: datum.info,
success: function (response) {
infowindow.setContent(response);
}.bind(infowindow)
});
}.bind(datum)
.bind(marker));
ii++;
}
}
.bind(pinset)
.bind(infowindow)
});
}
});
</script>
</head>
<body>
<ul>
<li>Ajax calls load groups of pins.</li>
<li>onclick an ajax call fetches the info window.</li>
</ul>
<div id="map" style="width:100%; height: 750px;"></div>
</body>
</html>
加载中,请稍侯......
精彩评论