PHP <3 Google Maps

Palestra exibida na SECOMP (Semana da Computação) na Universidade Federal de Sergipe. Por Jefersson Nathan de oliveira Chaves

Transcript

1. PHP ♥ GOOGLE MAPS Jefersson Nathan de Oliveira Chaves
2. 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
3. Geolocalização
4. Métodos Posicionamento Global por Satélite Triangulação GeoIP
5. Google Maps Fácil utilização Varias bibliotecas Extensível Cross Plataform Cross Browser STREET VIEW
6. Mão na massa...
7. Problema 1 Esse jogo é uma zona, um mapa cairia bem ein!?
8. Step 1 http:/ /maps.googleapis.com/maps/api/js
9. Step 1 http:/ /maps.googleapis.com/maps/api/js sensor
10. 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 );
11. Step 1 <div id="map-canvas"/>
12. Step 1
13. Markers
14. Problema 2 Se eu pudesse saber onde estão estas malditas tartarugas...
15. Localização navigator.geolocation.getCurrentPosition()
16. Onde estou? Opa! Você está por aqui.
17. Onde estou? Opa! Você está por aqui. WTF?
18. Persistindo... CREATE TABLE turtles( localization varchar(255), lat varchar(255), long varchar(255) );
19. Persistindo... INSERT INTO `turtles` VALUES( `Yoshi\`s Island`, 199089, -7040 );
20. Persistindo... BASE DE DADOS COM INFORMAÇÕES DE LAT E LONG
22. 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.
23. XML? <?php $mysqlConnection = new \PDO('...'); $statement = $mysqlConnection->query( ”SELECT * FROM turtles” ); $enemyLocation = $statement->fetchAll(PDO::FETCH_OBJ); foreach ($enemyLocation as $place) { / / ... }
24. XML? <markers> <marker name="Yoshi's Island" lat="199089" lng="-7040"/> <marker name="Star Road" lat="47 .608940" lng="-122.340141"/> <marker name="Forest of Illusion" lat="90809" lng="-37 .2465"/> <marker name="Valley of Bowser" lat="91.2763" lng="-14.1998"/> </markers>
25. Criando o Mapa
26. Criando o Mapa... Carregando XML... API v2 GDownloadUrl API v3 ---
27. 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); }
28. Criando o Mapa... “XMLHttpRequest is asynchronous”
29. 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 = "<b>" + name + "</b> <br/>"; var marker = new google.maps.Marker({ map: map, position: point, }); bindInfoWindow(marker, map, infoWindow, html); } });
30. Markers :/
31. Marker Personalizado... var customIcons = { enemy: { icon: 'pictures/pin.png' } }
32. Markers *_*
33. Markers e Infos... function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); }
34. Infos Yoshi’s Island
35. @malukenho malukenho@php.net