gmaps en partialView

lunedì 20 febbraio 2012 19:06

Hola estoy trabajando con la version 3 de gmaps, tengo una vista parcial llamada Formulario, no he logrado mostrar el mapa, aqui les dejo el codigo de la vista parcial:

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

 <script type="text/javascript">


                    google.maps.event.addDomListener(window, 'load', cargarMapa);


                    function cargarMapa() {
                        var latlng = new google.maps.LatLng(-55.397, 50.644);
                        var opciones = {
                            zoom: 8,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        var mapa = new google.maps.Map(document.getElementById("mapa"),opciones);

                    };



                </script>

                <div id="mapa">
                </div>

segun el ejemplo de google, deberia usar estas lineas tambien:

<!DOCTYPE html>

pero como se trata de una vista parcial, estas dos ultimas lineas las tengo en mi master page, he revisado el depurador de scripts y al parecer se envia la solicitud y se recibe la respuesta de google, pero el mapa no se muestra, en mi div <div id="mapa">.

Cualquier sugerencia es bienvenida.

Muchas gracias de antemano

Tutte le risposte

martedì 21 febbraio 2012 06:54

Podrías probar a mover el listener del evento a despues de la función:

<script type="text/javascript">

                   function cargarMapa() {
                        var latlng = new google.maps.LatLng(-55.397, 50.644);
                        var opciones = {
                            zoom: 8,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        var mapa = new google.maps.Map(document.getElementById("mapa"),opciones);

                    };

google.maps.event.addDomListener(window, 'load', cargarMapa);

                </script>

Quizá funciones mejor así...

Fernanando Escolar - http://www.programandonet.com/ - @fernandoescolar

martedì 21 febbraio 2012 13:37

0
Podrías probar a mover el listener del evento a despues de la función:
Quizá funciones mejor así...

Fernanando Escolar - http://www.programandonet.com/ - @fernandoescolar
Hola Fernando, muchas gracias por responder, ya lo he intentado de esa forma, tampoco me funcionó.

Saludos
- Risposta
- Citazione

martedì 21 febbraio 2012 14:10

Hola,

El código que suelo usar en MVC para que funcione es este:

<!DOCTYPE HTML>
<html>
<head>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
 $(document).ready(function () {
        var myLatlng = new google.maps.LatLng(41.395869, 2.163110858);
        var bounds = new google.maps.LatLngBounds();
        var options = {
            zoom: 12,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var googleMap = new google.maps.Map($('#map')[0], options);
 });

</script>

</head>
<body>
<div id="map"></div>
</body>
</html>

Y cuando es en una partialView, el "DOCTYPE" lo pongo al inicio de la página de "_Layout.cshtml".

Si no es esto, el problema puede estar en cómo se carga esa partialView, que por ejemplo lo hagas con ajax...

Fernanando Escolar - http://www.programandonet.com/ - @fernandoescolar

martedì 21 febbraio 2012 22:44

0
Hola,

El código que suelo usar en MVC para que funcione es este:
Y cuando es en una partialView, el "DOCTYPE" lo pongo al inicio de la página de "_Layout.cshtml".

Si no es esto, el problema puede estar en cómo se carga esa partialView, que por ejemplo lo hagas con ajax...

Fernanando Escolar - http://www.programandonet.com/ - @fernandoescolar
Hola Fernando, no no llamo a la vistaparcial con ajax, y acerca de ese _Layout.cshtml que indicas debo incluirlo manualmente?, o viene por defecto en MVC2?, podrias darme mas info al respecto?

Gracias por responder
- Modificato Richof martedì 21 febbraio 2012 22:50
- Risposta
- Citazione
martedì 21 febbraio 2012 23:01

0
Hola,

Vale, acabo de caer con que estás con la versión 2 de asp.Net MVC, pensaba que trabajabas con la 3... La cosa es que en la página maestra (por defecto "Views/Shared/Site.Master"), cambies la etiqueta de DOCTYPE y la de HTML por las que figuran en el código que te he pasado. Después puedes añadir los scripts de jquery (viene incluido en MVC2) y de google maps:
```
<script src="<%: Url.Content("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
```
Y para finalizar el código de llamada en la PartialView, tal y como se muestra en el ejemplo.

De esta forma reproduciríamos exactamente el código que uso en la versión 3 de Asp.Net MVC.

Un saludo,

Fernanando Escolar - http://www.programandonet.com/ - @fernandoescolar
- Risposta
- Citazione
mercoledì 22 febbraio 2012 04:02

0
Hola,

Vale, acabo de caer con que estás con la versión 2 de asp.Net MVC, pensaba que trabajabas con la 3... La cosa es que en la página maestra (por defecto "Views/Shared/Site.Master"), cambies la etiqueta de DOCTYPE y la de HTML por las que figuran en el código que te he pasado. Después puedes añadir los scripts de jquery (viene incluido en MVC2) y de google maps:
Y para finalizar el código de llamada en la PartialView, tal y como se muestra en el ejemplo.

De esta forma reproduciríamos exactamente el código que uso en la versión 3 de Asp.Net MVC.

Un saludo,

Fernanando Escolar - http://www.programandonet.com/ - @fernandoescolar
Hola Fernando, he seguido tus instrucciones, pero aun esto no funciona:

en mi master page tengo esto:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

En la vista parcial Formulario tengo esto:

<div id="map"></div>

<script type="text/javascript">

$(document).ready(function () {
var myLatlng = new google.maps.LatLng(41.395869, 2.163110858);
var bounds = new google.maps.LatLngBounds();
var options = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var googleMap = new google.maps.Map($('#map')[0], options);
});
</script>

En la vista llamada Editar, tengo incrustada la vista parcial Formulario, de esta forma:
<div>
<%Html.RenderAction("Formulario", "Anuncios", new { id = Model.Anuncio.IDAnuncio }); %>

</div>

Agradezco cualquier sugerencia. Saludos cordiales
- Risposta
- Citazione
mercoledì 22 febbraio 2012 07:54

0
Hola de nuevo,

podrías sustituir la cabecera actual:
```
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
```
por esta:
```
<!DOCTYPE HTML>
<html>
```
Y si con esto no, se me acaban las ideas... :)

Un saludo,
Fernanando Escolar - http://www.programandonet.com/ - @fernandoescolar
- Risposta
- Citazione
mercoledì 22 febbraio 2012 12:47

0

ups.. esto ultimo tampoco me soluciono el problema, de todas formas gracias por intentarlo Fernando, seguiré esperando los consejos del foro.

Saludos cordiales
- Risposta
- Citazione
giovedì 1 marzo 2012 15:47

0

que tal amigo, porque no intentas los siguiente:

1.- Crea una funcion javascript en la vista parcial, donde hagas la inicializacion del mapa, porque actualmente la tienes en el document ready de tu vista parcial.

2.- Crea un div en tu página contenedora en donde puedas renderear tu vista parcial con el mapa.

3.- En ves de cargarla a traves del Helper HTML.RenderPartial, cargala a traves de ajax en el document ready de tu página contenedora.

4.- una ves que hayas obtenido una respuesta satisfactoria de tu funcion de ajax (success), pon todo el codigo que te regresa dentro del div que creaste en tu pagina contenedora para renderear tu vista parcial.

5.- por ultimo como ya tienes el codigo de tu vista parcial dentro de tu pagina principal, puedes llamar a la función donde inicializas el mapa, para que lo muestre, esto lo puedes inmediatamente despues de cargar el div con tu vista parcial en el evento success del ajax.

ojalá y te sirva; Saludos.
- Risposta
- Citazione
domenica 11 marzo 2012 01:39

0

hola gracias por responder, quisiera dejar claro lo que intento hacer, para ver si alguien puede ayudar porque aun no lo he logrado

la idea es una lista de items, cada item es un anuncio, justo debajo de este anuncio(titulo) esta un div con el detalle del anuncio(vista parcial) que esta escondido con css y javascript y al darle click al titulo pues el detalle se despliega algo parecido a este foro, solo que sin usar ajax, este detalle esta incrustado en el div con un renderAction, cada anuncio puede tener su ubicacion en el mapa, entonces es posible que tenga que desplegar varios mapas a la vez con diferentes datos de latitud y longitud cada uno, el caso es que no me funciona nada de nada, con la V2 todo funcionaba muy bien en local, pero al subir la app al servidor me pide una nueva key de gmaps y resulta que google ya no genera mas la keys porque ya existe la v3 que no las utiliza, asi que estoy en un problema.

Ojala puedan ayudarme.

Saludos cordiales
- Risposta
- Citazione
venerdì 4 maggio 2012 13:08

0

Quita esta linea y funcionara
<!DOCTYPE html>

ya que esa linea significa que estarás usando html5, y algunos navegadores no lo soportan IExplorer es uno de ellos.

Ahora lo que yo deseo saber es cual es el código en asp para insertar una marca en googlemaps v3 porfavor
- Risposta
- Citazione