I have a problem with a project where I'm using the google maps api: In I.E (7, 8, 9) It's working nicely, but in Chrome and Firefox the map is not displaying, as you can see in this sample image:
I share some of the javascript code and the ASPX page I'm using for this:
<script type="text/javascript">
function elementoArray(valor) {
this.valorelemento = valor;
}
function initialize(address) {
//var io = 0;
window.parent.ActualizarBoton(false);
var geoCoder = new google.maps.Geocoder(address)
var request = { address: address };
geoCoder.geocode(request, geocodeResult)
}
function geocodeResult(result, status) {
var valido = false;
if (status == 'OK') {
localizaciones = new Array();
var etiquetas = new Array();
myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//I'm using only the first option found by Google:
for (var i = 0; i < 1; i++) {
localizaciones[localizaciones.length] = new google.maps.LatLng(result[i].geometry.location.lat(), result[i].geometry.location.lng());
etiquetas[etiquetas.length] = new elementoArray(result[i].formatted_address);
}
if (localizaciones.length > 0) {
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
markers = new Array();
for (var i = 0; i < localizaciones.length; i++) {
markers[markers.length] = new google.maps.Marker({
position: localizaciones[i],
map: map,
title: etiquetas[i].valorelemento
});
}
valido = true;
//This is for showing a marker in the map:
//mostrarMarcador(0);
}
else {
alert('Address not found');
valido = false;
}
And in code-behind, (in vb.net) I have something like this:
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
'This session variable is set previously...
hiddenDireccion.Value = Session("Mapa.Direccion")
hiddenMunicipio.Value = "BOGOTA"
hiddenDepartamento.Value = "CUNDINAMARCA"
hiddenConsultar.Value = "true"
End Sub
I have tried to put "alerts" everywhere in my javascript code so that I can somehow debug this code, and everything seems to be working just fine (and in fact, everything is Ok in I.E, as I already said), just that in Chrome, FF the map is not being shown
What do you people think that I should try to figure out what is wrong here??
I will try using the error console and will see if I can find what my error is, (I have not found the time yet to do this, but as soon as I can, I hope I will be able to find the problem there).
This website requires a user/password, so It can be a bit difficult to give you access for you to check. However if the problem continues, I think I can give you access.
diegogb
Member
22 Points
13 Posts
Problem displaying Google Map in Chrome, Firefox
Nov 30, 2012 11:07 PM|LINK
Hi all:
I have a problem with a project where I'm using the google maps api: In I.E (7, 8, 9) It's working nicely, but in Chrome and Firefox the map is not displaying, as you can see in this sample image:
I share some of the javascript code and the ASPX page I'm using for this:
<head>
<style type="text/css">
html, body, #map_canvas
{
margin: 0;
padding: 0;
height: 100%;
display: block;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function elementoArray(valor) {
this.valorelemento = valor;
}
function initialize(address) {
//var io = 0;
window.parent.ActualizarBoton(false);
var geoCoder = new google.maps.Geocoder(address)
var request = { address: address };
geoCoder.geocode(request, geocodeResult)
}
function geocodeResult(result, status) {
var valido = false;
if (status == 'OK') {
localizaciones = new Array();
var etiquetas = new Array();
myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//I'm using only the first option found by Google:
for (var i = 0; i < 1; i++) {
localizaciones[localizaciones.length] = new google.maps.LatLng(result[i].geometry.location.lat(), result[i].geometry.location.lng());
etiquetas[etiquetas.length] = new elementoArray(result[i].formatted_address);
}
if (localizaciones.length > 0) {
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
markers = new Array();
for (var i = 0; i < localizaciones.length; i++) {
markers[markers.length] = new google.maps.Marker({
position: localizaciones[i],
map: map,
title: etiquetas[i].valorelemento
});
}
valido = true;
//This is for showing a marker in the map:
//mostrarMarcador(0);
}
else {
alert('Address not found');
valido = false;
}
document.getElementById('<%= hiddenConsultar.ClientID %>').value = 'false'
$('#<%= hiddenConsultar.ClientID %>').attr('value', false)
}
else if (status == 'ZERO_RESULTS') {
alert('Address not found');
valido = false;
}
else {
alert("There was an error: " + status);
valido = false;
}
window.parent.ActualizarBoton(valido);
}
</script>
<script type="text/javascript">
$(document).ready(function () {
var direccion = $('#<%= hiddenDireccion.ClientID %>');
var consultar = $('#<%= hiddenConsultar.ClientID %>');
ComplementoDireccion = $('#<%= hiddenComplemento.ClientID %>').attr('value');
if (consultar.attr('value') == 'true') {
initialize(direccion.attr('value') + ',' + municipio.attr('value') + ',' + departamento.attr('value') + ',Colombia');
$('#<%= hiddenConsultar.ClientID %>').attr('value', 'false');
}
return false;
})
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="hiddenDireccion" runat="server" Value="" />
<asp:HiddenField ID="hiddenMunicipio" runat="server" Value="" />
<asp:HiddenField ID="hiddenDepartamento" runat="server" Value="" />
<asp:HiddenField ID="hiddenConsultar" runat="server" Value="" />
<table style="width: 100%; height: 100%">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<tr style="height:90%">
<td style="width: 100%">
<div id="map_canvas" style="width: 100%; height: 100%;">
</div>
</td>
</tr>
<tr style="height:10%;">
<td>
<asp:Label ID="lbDireccion" runat="server" Text="" CssClass="addressOnMap"></asp:Label>
</td>
</tr>
</table>
</form>
</body>
And in code-behind, (in vb.net) I have something like this:
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
'This session variable is set previously...
hiddenDireccion.Value = Session("Mapa.Direccion")
hiddenMunicipio.Value = "BOGOTA"
hiddenDepartamento.Value = "CUNDINAMARCA"
hiddenConsultar.Value = "true"
End Sub
I have tried to put "alerts" everywhere in my javascript code so that I can somehow debug this code, and everything seems to be working just fine (and in fact, everything is Ok in I.E, as I already said), just that in Chrome, FF the map is not being shown
What do you people think that I should try to figure out what is wrong here??
Thanks a lot,
Diego
roopeshreddy
All-Star
20135 Points
3323 Posts
Re: Problem displaying Google Map in Chrome, Firefox
Dec 03, 2012 06:58 AM|LINK
Hi,
Did you check the Error Console in the Chrome or Firefox? If not, please check it and you will know about why it's not displaying!
Moreover, do you have this webpage available for us to check?
Hope it helps u...
Roopesh Reddy C
Roopesh's Space
Song-Tian - ...
All-Star
43699 Points
4304 Posts
Microsoft
Re: Problem displaying Google Map in Chrome, Firefox
Dec 03, 2012 07:30 AM|LINK
Hi,
Please debug with IE Developer Tools. Any more question, please feel free to reply.
Feedback to us
Develop and promote your apps in Windows Store
diegogb
Member
22 Points
13 Posts
Re: Problem displaying Google Map in Chrome, Firefox
Dec 03, 2012 03:11 PM|LINK
Hello:
Thanks a lot for your reply.
I will try using the error console and will see if I can find what my error is, (I have not found the time yet to do this, but as soon as I can, I hope I will be able to find the problem there).
This website requires a user/password, so It can be a bit difficult to give you access for you to check. However if the problem continues, I think I can give you access.
Thank you.