Personalizar Icono en Google Maps


Saludos amig@s en esta oportunidad les mostraré como pueden personalizar los iconos que vienen por defecto en Google Maps cambiaremos del clasico icono....
cambiaremos el icono anterior a uno Personalizado.
Primero debemos insertar en nuestro HTML, el Script para hacer referencia a nuestro codigo que generamos en Google Maps.
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAszwnb6dZYCsQu-_aveaU4xTDvvvkTBERZATnPCc0psKHgVls_hQ3YkvyHhVXBgxW9mnaZIt6EVA" >


Luego veamos que necesitamos para agregar un Marker, pero con un GIcon, personalizado.

<script type="text/javascript">
      function load() {
          if (GBrowserIsCompatible()) {
              var map = new GMap2(document.getElementById("map"));
              var center = new GLatLng(-10.574222078332805, -75.41015625);
              map.setCenter(center, 5);
              map.addControl(new GLargeMapControl());
              map.setMapType(G_NORMAL_MAP);

              //agregamos un Icono
              var iconoMarca = new GIcon(G_DEFAULT_ICON);
              iconoMarca.image = "banderaperu.png";
              var tamanoIcono = new GSize(40, 40);
              iconoMarca.iconSize = tamanoIcono;
             //Funcion para crear el Marker y cada vez que se haga clic mostrará un  mensaje personalizado.
              function createMarker(point, nombre, autor) {
                  var marker = new GMarker(point, iconoMarca);
                  GEvent.addListener(marker, 'click', function () {
                      marker.openInfoWindowHtml("<span style='font-size: 8pt; font-family: verdana'>" + nombre + "<br>" + autor + "</span>");
                  });
                  return marker;
              }
             //agregamos un marker al Mapa
              var point = new GPoint(-75, -11.8);
              var nombre = "ESTE ES MI PERÚ";
              var autor = "Giancarlo Gamarra Charaja - desarrolladornet.blogspot.com";
             //la funcion createmarker retorna un Marker, para agregarlo al Mapa
              var marker = createMarker(point, nombre, autor);
              map.addOverlay(marker);

          }
      }
      window.onload = load
    </script> 


Luego en nuestro HTML, deberemos tener algo asi:

<form id="form1" runat="server">
   
    <div id="map" style="width: 500px; height: 500px"></div>

</form>


luego solo ejecutamos nuestra aplicacion,o abrimos nuestro archivo HTML, en un navegador, y veremos un resultado como lo siguiente:

Haz CLIC en la Bandera del PERUUUU.

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