Slide 1

Slide 1 text

PHP ♥ GOOGLE MAPS Jefersson Nathan de Oliveira Chaves

Slide 2

Slide 2 text

Quem sou eu? Jefersson Nathan is a leader and representative of the PHP User Group of the State of Sergipe, Brazil. Where works to keep the local community strong and united. Currently, he works in a company focusing on web solutions and devotes his free time to help with community projects OpenSources contributions. - Web and PHP Magazine, May 2013

Slide 3

Slide 3 text

Geolocalização

Slide 4

Slide 4 text

Métodos Posicionamento Global por Satélite Triangulação GeoIP

Slide 5

Slide 5 text

Google Maps Fácil utilização Varias bibliotecas Extensível Cross Plataform Cross Browser STREET VIEW

Slide 6

Slide 6 text

Mão na massa...

Slide 7

Slide 7 text

Problema 1 Esse jogo é uma zona, um mapa cairia bem ein!?

Slide 8

Slide 8 text

Step 1 http:/ /maps.googleapis.com/maps/api/js

Slide 9

Slide 9 text

Step 1 http:/ /maps.googleapis.com/maps/api/js sensor

Slide 10

Slide 10 text

Step 1 function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8 }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions ); } google.maps.event.addDomListener( window, 'load', initialize );

Slide 11

Slide 11 text

Step 1

Slide 12

Slide 12 text

Step 1

Slide 13

Slide 13 text

Markers

Slide 14

Slide 14 text

Problema 2 Se eu pudesse saber onde estão estas malditas tartarugas...

Slide 15

Slide 15 text

Localização navigator.geolocation.getCurrentPosition()

Slide 16

Slide 16 text

Onde estou? Opa! Você está por aqui.

Slide 17

Slide 17 text

Onde estou? Opa! Você está por aqui. WTF?

Slide 18

Slide 18 text

Persistindo... CREATE TABLE turtles( localization varchar(255), lat varchar(255), long varchar(255) );

Slide 19

Slide 19 text

Persistindo... INSERT INTO `turtles` VALUES( `Yoshi\`s Island`, 199089, -7040 );

Slide 20

Slide 20 text

Persistindo... BASE DE DADOS COM INFORMAÇÕES DE LAT E LONG

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

XML? By using an XML file as an intermediary between your database and your Google Map, it makes for a faster initial page load, a more flexible map application, and easier debugging.

Slide 23

Slide 23 text

XML? query( ”SELECT * FROM turtles” ); $enemyLocation = $statement->fetchAll(PDO::FETCH_OBJ); foreach ($enemyLocation as $place) { / / ... }

Slide 24

Slide 24 text

XML?

Slide 25

Slide 25 text

Criando o Mapa

Slide 26

Slide 26 text

Criando o Mapa... Carregando XML... API v2 GDownloadUrl API v3 ---

Slide 27

Slide 27 text

Criando o Mapa... function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); }

Slide 28

Slide 28 text

Criando o Mapa... “XMLHttpRequest is asynchronous”

Slide 29

Slide 29 text

Criando o Mapa... downloadUrl("xmlGenerator.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")) ); var html = "" + name + "
"; var marker = new google.maps.Marker({ map: map, position: point, }); bindInfoWindow(marker, map, infoWindow, html); } });

Slide 30

Slide 30 text

Markers :/

Slide 31

Slide 31 text

Marker Personalizado... var customIcons = { enemy: { icon: 'pictures/pin.png' } }

Slide 32

Slide 32 text

Markers *_*

Slide 33

Slide 33 text

Markers e Infos... function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); }

Slide 34

Slide 34 text

Infos Yoshi’s Island

Slide 35

Slide 35 text

@malukenho [email protected]