Dear Friends,
I have created Web API and consumed in Web Application, the problem is i have tried to load Google Map using Google API, it work fine in IE, but not work in Firefox and Google Chrome, because Jquery Ajax not working in firefox, kindly check my below coding
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Always Money</title>
<link href="css/always_money.css" rel="stylesheet" />
<link rel="stylesheet" href="css/clndr.css">
<!-- slider css -->
<link rel="stylesheet" href="css/iview.css" />
<!--For Locations Map -->
<title></title>
<style>
#map_canvas{
width: 600px;
height: 500px;
}
.map_heading {
font-size:13px;
}
#map_canvas { max-width:none; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function LatLong() {
try {
debugger
//geocoder = new google.maps.Geocoder();
var txtsearch = document.getElementById("txtsearch").value;
//var rootUrl = "http://" + document.location.hostname + ":" + window.location.port;
var rootUrl = 'http://localhost:3006'
var apiUrl = '/api/TMGMaps';
var uris = rootUrl + apiUrl;
var controllerPath = uris + '/GetMapsDetails?strAddress=' + txtsearch
//jQuery.support.cors = true;
$.ajax({
type: 'Get',
url: controllerPath,
datatype: 'jsonp',
contentType: "application/json;charset=utf-8",
async: false,
success: function (data) {
debugger
if (data[0].DsMaps.Table.length > 0) {
var map;
var global_markers = [];
var markers = new Array();
for (j = 0; j < data[0].DsMaps.Table.length; j++) {
markers[j] = [[data[0].DsMaps.Table[j].LAT, data[0].DsMaps.Table[j].LONG, data[0].DsMaps.Table[j].Address]];
}
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(data[0].DsMaps.Table[0].LAT, data[0].DsMaps.Table[0].LONG);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for (var i = 0; i < markers.length; i++) {
var lat, lng, trailhead_name;
var j = i
if (i > 0) {
j = 0;
lat = parseFloat(markers[i][j][0]);
lng = parseFloat(markers[i][j][1]);
trailhead_name = markers[i][j][2];
}
else {
lat = parseFloat(markers[i][i][0]);
lng = parseFloat(markers[i][i][1]);
trailhead_name = markers[i][i][2];
}
var image = 'img/smiley_happy.png';
var myLatlng = new google.maps.LatLng(lat, lng);
var contentString = "<html><body>
</body></html>";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name,
icon: image
});
marker['infowindow'] = contentString;
global_markers[i] = marker;
var infowindow = new google.maps.InfoWindow({});
google.maps.event.addListener(global_markers[i], 'click', function () {
infowindow.setContent(this['infowindow']);
infowindow.open(map, this);
});
}
}
else {
var map;
var global_markers = [];
var markers = [[32.3674005, -86.2711843, '1182 ANN STREET']];
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(32.3674005, -86.2711843);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
lat = parseFloat(markers[0][0]);
lng = parseFloat(markers[0][1]);
trailhead_name = markers[0][2];
var image = 'Images/smiley_happy.png';
var myLatlng = new google.maps.LatLng(lat, lng);
var contentString = "<html><body>
</body></html>";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name,
icon: image
});
marker['infowindow'] = contentString;
global_markers[0] = marker;
var infowindow = new google.maps.InfoWindow({});
google.maps.event.addListener(global_markers[0], 'click', function () {
infowindow.setContent(this['infowindow']);
infowindow.open(map, this);
});
}
},
error: function (x,y,z) {
alert(y);
}
});
}
catch (ex) {
alert(ex.message);
throw ex;
}
}
</script>
</head>
<body>
<!-- header starts -->
<!-- header ends -->
<!-- wrapper starts -->
<!-- wrapper ends -->
<!-- footer starts -->
<!-- footer ends -->
<!-- menu js -->
<script src="js/script.js"></script>
<!-- calendar js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script>
$(function(){
$("#header_content").load("include/header.html");
$("#left_form").load("include/left_form.html");
$("#right_form").load("include/right_form.html");
$("#footer").load("include/footer.html");
});
</script>
</body>
</html>
Thanks in Advance
Submit an article or tip