我试图通过ajax加载Google地图,但是如果我传递变量,地图不会显示。
location_data
这是我从JSON和map显示数组的HTML代码
<div id="print_json">JSON Data Here</div>
<div id="map"></div>
这是从我的PHP文件返回的
["['test 1', 25.1212, 55.1535, 5]","['test 2', 25.2084, 55.2719, 6]","['test 3', 25.2285, 55.3273, 7]"]
这是我的JavaScript
function initMap(location_data) {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the web page
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.setTilt(50);
// Multiple markers location, latitude, and longitude
alert(location_data);
//var markers = location_data;
var markers = [
['test 1', 25.1212, 55.1535, 5],
['test 2', 25.2084, 55.2719, 6],
['test 3', 25.2285, 55.3273, 7]
];
// Info window content
var infoWindowContent = [
['<div class="info_content">' +
'<h3>Brooklyn Museum</h3>' +
'<p>The Brooklyn Museum is an art museum located in the New York City borough of Brooklyn.</p>' + '</div>'
],
['<div class="info_content">' +
'<h3>Brooklyn Public Library</h3>' +
'<p>The Brooklyn Public Library (BPL) is the public library system of the borough of Brooklyn, in New York City.</p>' +
'</div>'
],
['<div class="info_content">' +
'<h3>Prospect Park Zoo</h3>' +
'<p>The Prospect Park Zoo is a 12-acre (4.9 ha) zoo located off Flatbush Avenue on the eastern side of Prospect Park, Brooklyn, New York City.</p>' +
'</div>'
]
];
// Add multiple markers to map
var infoWindow = new google.maps.InfoWindow(),
marker, i;
// Place each marker on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Add info window to marker
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Center the map to fit all markers on the screen
map.fitBounds(bounds);
}
// Set zoom level
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(5);
google.maps.event.removeListener(boundsListener);
});
}
// Sets the map on all markers in the array.
// Load initialize function
//google.maps.event.addDomListener(window, 'load', initMap);
$(document).ready(function() {
var location_data;
$("#mapped").on("change", function() {
var dataname = $(".selectpicker option:selected").val();
$.ajax({
url: "findforwork.php",
//contentType: "application/json; charset=UTF-8",
//dataType: "application/json",
type: "POST",
data: "searchid=" + dataname,
success: function(response) {
//alert('Success' + response);
$("#print_json").html(response.replace(/\"/g, ""));
console.log(JSON.parse(response));
var location_data = response.replace(/\"/g, "");
var mapDiv = document.getElementById('map');
google.maps.event.addDomListener(mapDiv, "load", initMap(location_data));
}
}); //End Of Ajax
}); //End of mapped
});