Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: ayon.g en 10 Abril 2012, 06:32 am



Título: Ayuda con markers en Google Maps V2
Publicado por: ayon.g en 10 Abril 2012, 06:32 am
Hola, estoy usando un mapa de google V2 para poner los markers desde una base de datos este es el código que ocupo:
Código:
 //<![CDATA[

    var iconBlue = new GIcon();
    iconBlue.image = 'mm_20_blue.png';
    iconBlue.shadow = 'mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon();
    iconRed.image = 'mm_20_red.png';
    iconRed.shadow = 'mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["restaurant"] = iconBlue;
    customIcons["bar"] = iconRed;

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(-27.366667, -70.333333), 5);

        // Change this depending on the name of your PHP file
        GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, name, address, type) {
      var marker = new GMarker(point, customIcons[type]);
      var html = "<b>Volcan " + name + "</b> <br/>" + "<p>Dispone de la siguiente infomacion:</p>" + address + "<li><a>Informacion General</a></li><li>Informacion Eruptiva Moderna</li><li>Vulcanologia Fisica</li><li>Geoquimica de Rocas</li><li>Geoquimica de Fluidos</li><li>Edades</li><li>Mapa geoligico</li><br><br/>";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    //]]>
El problema es que necesito que el nombre se vea en todo momento, y la única solución que encontré es este código que genera un popup dentro del mapa, pero no sé cómo unirlos, este es el código del mapa con popup:
Código:
    <script type="text/javascript">
    document.write('<script type="text/javascript" src="../src/popupmarker'+(document.location.search.indexOf('packed')>-1?'_packed':'')+'.js"><'+'/script>');
  </script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(35.681382, 139.766084), 1);
        
        var opts = {
          text : "Hello! I'm a PopupMarker."
        };
        
        var marker = new PopupMarker(new GLatLng(35.681382, 139.766084), opts);
        map.addOverlay(marker);
      }
    }

    </script>
Lo saque desde:
http://gmaps-utility-library-dev.googlecode.com/svn/tags/popupmarker/1.1/examples/simple.html (http://gmaps-utility-library-dev.googlecode.com/svn/tags/popupmarker/1.1/examples/simple.html)
http://gmaps-utility-library-dev.googlecode.com/svn/tags/popupmarker/ (http://gmaps-utility-library-dev.googlecode.com/svn/tags/popupmarker/)

No tengo mucho conocimiento pero lo necesito o si tienen otra alternativa para ponerle el nombre como salen los marcadores en el google earth, muchas gracias de antemano.
Ayôn


Título: Re: Ayuda con markers en Google Maps V2
Publicado por: Shell Root en 11 Abril 2012, 00:30 am
Pero si ya tienes el ejemplo, sólo necesitas mirar el código fuente, no te parece?


Título: Re: Ayuda con markers en Google Maps V2
Publicado por: ayon.g en 11 Abril 2012, 07:01 am
Hola, gracias por responder, uní el código y me quedo esto:
Código:
               <script type="text/javascript">
    document.write('<script type="text/javascript" src="popupmarker'+(document.location.search.indexOf('packed')>-1?'_packed':'')+'.js"><'+'/script>');
  </script>

<script type="text/javascript">

    //<![CDATA[

    var iconBlue = new GIcon();
    iconBlue.image = 'mm_20_blue.png';
    iconBlue.shadow = 'mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon();
    iconRed.image = 'mm_20_red.png';
    iconRed.shadow = 'mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["restaurant"] = iconBlue;
    customIcons["bar"] = iconRed;

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(-27.366667, -70.333333), 5);

        // Change this depending on the name of your PHP file
        GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
 var opts = {
          text : "Volcan " + name
        };
       
        var marker = new PopupMarker(new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))), opts);
        map.addOverlay(marker);
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");

            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));

            var marker = createMarker(point, name, address, type);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, name, address, type) {
      var marker = new GMarker(point, customIcons[type]);
      var html = "<b>Volcan " + name + "</b> <br/>" + "<p>Dispone de la siguiente infomacion:</p>" + address + "<li><a>Informacion General</a></li><li>Informacion Eruptiva Moderna</li><li>Vulcanologia Fisica</li><li>Geoquimica de Rocas</li><li>Geoquimica de Fluidos</li><li>Edades</li><li>Mapa geoligico</li><br><br/>";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    //]]>
  </script>
(http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/383552_3689161030241_1311680917_3501899_1206627315_n.jpg)


El problema que tengo ahora es q el marcador que se genera cuando hago el popupmarker no deja que se despliegue la ventana de infowindows (intente poniéndolo antes de que se generara el otro marcador pero solo aparece atrás el rojo (como se ve en la imagen), pero de todas maneras no abre el infowindows) como podría eliminar el icono del otro marcador pero manteniendo el globo con el nombre. Muchas gracias
Ayôn