GOOGLE MAPS Y ASP.NET(2) MARKERS


Agregar Markers 

Saludos amigo, para continuar con la 2da parte de Google Maps y ASP.net.
En este articulo veremos como crear Markers, para dibujarlos o colocarlos en el Mapa, para ello 1ra debemos crear el Mapa, que ya lo vimos aqui.

Primero debemos tener nuestra Funcion en Java Script que Inicializará el Mapa, esos números que aparecen ahy "-10.854886268472446" y "-7609130859375", son la Latitud y Longitud en el Planeta, la puedes obtener usando talvez GOOGLE EARTH, para colocar la 1ra vista del mapa en la zona que prefieras.


Ahora Crearemos un Metodo llamado "AgregarMarkers" la cual se encargará de Crear los Markers en el Mapa de Google.

Vemos que las Coordenadas "-16.402165015788394, -71.55168056488037", es la Coordenada de la Ciudad de Arequipa, aproximadamente.
La Linea GEvent.addListener..., lo que hace es agregarle al Marker un evento Clic, para que cuando se haga clic en el Muestre un InfoWindowHtml, que podremos agregarle cualquier informacion, en formato HTML.
Y con el metodo addOverlay(marker),  le decimos al objeto map, que agregue un Marker al Mapa.
Bueno y el resultado final seria asi.....


Ahy les dejo el codigo completo, espero les sirva en sus aplicaciones, para la proxima haremos algo un poco mas complicado, hasta llegar a enlazar a Datos, un Saludo.

_________________________________________________________________________________

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Google Maps- Giancarlo Gamarra</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAszwnb6dZYCsQu-_aveaU4xTDvvvkTBERZATnPCc0psKHg_hQ3YkvyHh0W5VXBgxW9mnaZIt6EVA" >
</script>
<script type="text/javascript">
    var map;
     function initialize() {
         if (GBrowserIsCompatible()) {
             map = new GMap2(document.getElementById("map_canvas"));
             var center = new GLatLng(-10.854886268472446, -76.09130859375);
             map.addControl(new GLargeMapControl());
             map.setCenter(center, 5);
             AgregarMarkers();
         }
     }
     function AgregarMarkers() {
         var Point = new GLatLng(-16.402165015788394, -71.55168056488037);
         var Description = "YO VIVO EN LA CIUDAD DE AREQUIPA CON MI XIKITA, :-)";
         var marker = new GMarker(Point);
         GEvent.addListener(marker, "click", function () {
             marker.openInfoWindowHtml(Description);
         });
         map.addOverlay(marker);
     }
</script>
</head>
<body onload="initialize()">
    <form id="form1" runat="server">
    <div id="map_canvas" style="width: 500px; height: 500px"></div>
    </form>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Error al Iniciar Oracle SQL Developer 11g - Unable to find Java Virtual Machine

Image
Saludos amig@s , hoy quiero compartir con ustedes una experiencia que aveces suele pasarnos al momento de instalar algun SW, y se presentar errores que muchas veces investigamos y llegamos a resolverlos,entonces porque no compartirlo. En esta ocaciones despues de todo el Proceso de Instalacion del ORACLE SQL DEVELOPER 11g. tocaba iniciarlo y mando un error como este. Este error no permite iniciar nuestro ORACLE SQL DEVELOPER 11g, no se asusten, no le falta instalar nada, solo es un pequeño error de configuracion que debemos ajustarlo y nada mas, para ello vamos a la carpeta siguiente: c:\app\administrador\product\11.2.0\dbhome_1\sqldeveloper\sqldeveloper\bin OJO.: Esta ruta puede variar pero confio en su instinto para encontrarla, empiecen encontrando la carpeta "app". y abrimos el archivos SQLDEVELOPER.CONF.  Ahy dentro ubiquense en la linea donde dice SetJavaHome, y seguramente tendran la ruta que apunta a la carpeta de instalacion del JRE de Java. c:\ Pro
Read more

Como Mantener el Scroll despues de un PostBack ASP.net ( As Maintain Scroll after a PostBack ASP.net )

Saludos amig@s, Cuando trabajamos con ASP.net nos hemos dado cuenta que si tenemos una pagina muy extensa Horizontalmente y damos click en un boton que esta muy abajo de la página esto generará un PostBack, en termino simples "Refrescará la pagina" y nos llevará al Inicio de la Pagina, lo cual es incomodo porque nuevamente tendrémos que deslizar el Scroll de la pagina hacia abajo. OPCION 1: Agreguen la linea de codigo que se encuentra resaltada, indicandole que mantenga la posicion del Scroll en el PostBack <% @ Page Language ="C#" AutoEventWireup ="true" MaintainScrollPositionOnPostback ="true"     CodeFile ="Default.aspx.cs" Inherits ="_Default" %> <! DOCTYPE html > < html xmlns ="http://www.w3.org/1999/xhtml"> < head runat ="server"> < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8"/>
Read more

How to run ng serve in a different port
Como ejecutar ng serve en un puerto diferente

Image
Hello Everyone, In his post I'm going to explain How we can use a different port that ng use for default(4200). Maybe if we have an Angular 2 Project running, and then we also need another project running, and when we try to execute the ng serve command, CLI give us a message like this. Port 4200 is already in use. Use '-port' to specify a different port port 4200 is busy So we should execute a new command like this, it has to fix the problem. Altough you might use a different port 4202,4203 etc. ng serve --port 4201 ng serve running in a different port I hope this will help all of you in your amazing Angular 2 Project. See you next time.
Read more