Canales populares

Uso de PHP / Postgis con Google Maps Marker

PHP / Postgis con Google Maps API

Es este post hablaremos de dibujar poligonos y marcadores con la api de google maps obteniendo la informacion de una base de datos.

CREANDO LA TABLA Y COMO POBLARLA CON DATOS

CREATE TABLE marker ( id SERIAL, estado character varying, municipio character varying, localidad character varying, geom geometry(Point,4326));

INSERT INTO marker VALUES (5, 'GUANAJUATO', 'PENJAMO', 'ESTACION CORRALEJO', '0101000020E61000002A85E5747E5259C06F2F698CD6713440');
INSERT INTO marker VALUES (6, 'GUANAJUATO', 'PENJAMO', 'VEREDAS', '0101000020E61000000A2E56D4607659C09129BC57EF413440');
INSERT INTO marker VALUES (7, 'GUANAJUATO', 'HUANIMARO', 'LA LOBERA (EL RINON)', '0101000020E61000006F641EF9836259C07233DC80CF5B3440');
INSERT INTO marker VALUES (8, 'GUANAJUATO', 'VALLE DE SANTIAGO', 'RINCON DE PARANGUEO', '0101000020E6100000A5BDC117265059C0E4D3C685C16B3440');
INSERT INTO marker VALUES (9, 'GUANAJUATO', 'PENJAMO', 'SAN ANTONIO DE ACEVES', '0101000020E610000081711530A67C59C0EC84FA0A907F3440');
INSERT INTO marker VALUES (10, 'GUANAJUATO', 'CUERAMARO', 'TUPATARO', '0101000020E61000001B7F47F96E6959C0AA8251499D983440');
INSERT INTO marker VALUES (11, 'GUANAJUATO', 'PENJAMO', 'LAGUNA LARGA DE CORTES', '0101000020E6100000847A9F4F097C59C069A7499D3E653440');
INSERT INTO marker VALUES (12, 'GUANAJUATO', 'PENJAMO', 'ESTACION PENJAMO', '0101000020E6100000BD6D4B89496C59C0EAEC647094643440');
INSERT INTO marker VALUES (13, 'GUANAJUATO', 'SALAMANCA', 'LA CAPILLA', '0101000020E6100000CF6D1D77255359C06EF8409F868E3440');
INSERT INTO marker VALUES (14, 'GUANAJUATO', 'IRAPUATO', 'SANTA ELENA DE LA CRUZ', '0101000020E6100000F1F44A59865959C091806EBB129E3440');
INSERT INTO marker VALUES (15, 'GUANAJUATO', 'HUANIMARO', 'SAN JOSE DE AYALA', '0101000020E6100000B6BE4868CB5559C09B5C2957BA543440');
INSERT INTO marker VALUES (16, 'GUANAJUATO', 'ABASOLO', 'SAN TELMO DE ROA', '0101000020E61000005A6B836E0A5F59C02D28A99F79763440');
INSERT INTO marker VALUES (17, 'GUANAJUATO', 'HUANIMARO', 'LOS OTATES', '0101000020E610000070496991C85E59C04390831266663440');
INSERT INTO marker VALUES (18, 'GUANAJUATO', 'VALLE DE SANTIAGO', 'LAS JICAMAS', '0101000020E6100000D7E48464DC5659C0C132999E6E473440');
INSERT INTO marker VALUES (19, 'GUANAJUATO', 'PENJAMO', 'POTRERILLOS DEL RIO', '0101000020E6100000B9196EC0E77259C0061487BF68383440');
INSERT INTO marker VALUES (20, 'GUANAJUATO', 'PUEBLO NUEVO', 'PROGRESO DE LA UNION', '0101000020E6100000A538A2D60F5759C0A8DCA75788913440');
INSERT INTO marker VALUES (21, 'GUANAJUATO', 'PUEBLO NUEVO', 'YOSTIRO (YOSTIRO DE SAN ANTONIO)', '0101000020E6100000FCA2A943935959C01689A63F3D8F3440');
INSERT INTO marker VALUES (22, 'GUANAJUATO', 'IRAPUATO', 'CUCHICUATO', '0101000020E61000006CEE4339AC5D59C0F02CA470FBA83440');
INSERT INTO marker VALUES (23, 'GUANAJUATO', 'ABASOLO', 'LA CARROZA', '0101000020E6100000FE261422E06559C0E90E62670A913440');
INSERT INTO marker VALUES (24, 'GUANAJUATO', 'CUERAMARO', 'CERRITO DE AGUA CALIENTE', '0101000020E610000008AC1C5A646559C0255FA67909A33440');


ARCHIVO funciones.php
$db_crtgrf='gis_db';
$port='5432';
$host='localhost';
$usr='postgres';
$contrasena='pass_db';
?>


Archivo marcadores.php

require('../funciones.inc');
?>


[code]
 var customIcons = {
      restaurant: {
        icon: 'https://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'https://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'https://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'https://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

 function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(19.3957175,-99.0971625),
        zoom: 15,
        mapTypeId: 'roadmap'
      });
      
      var infoWindow = new google.maps.InfoWindow;
      var bounds = new google.maps.LatLngBounds();
        downloadUrl("marcador_map_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var address = markers.getAttribute("estado");
          var localidad = markers.getAttribute("localidad");
          var nombre_municipio = markers.getAttribute("municipio");
          var type = markers.getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers.getAttribute("lat")),
              parseFloat(markers.getAttribute("lng")));
              bounds.extend(point);
          var html = "ESTADO :" + address + " 
" +"MUNICIPIO :" + nombre_municipio + " 
"+"LOCALIDAD :" + localidad + ""  ;
      
0
0
0
0No hay comentarios