Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PHP <3 Google Maps

PHP <3 Google Maps

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

Jefersson Nathan

December 11, 2013
Tweet

More Decks by Jefersson Nathan

Other Decks in Programming

Transcript

  1. 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
  2. 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 );
  3. 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.
  4. XML? <?php $mysqlConnection = new \PDO('...'); $statement = $mysqlConnection->query( ”SELECT

    * FROM turtles” ); $enemyLocation = $statement->fetchAll(PDO::FETCH_OBJ); foreach ($enemyLocation as $place) { / / ... }
  5. 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>
  6. 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); }
  7. 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); } });
  8. Markers e Infos... function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker,

    'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); }