Popup windows and links (adding more functionality to your map).Polygons and routes, to give directions and highlight areas of the map.Custom map icons (instead of the standard red pin).Some examples of ways that you can make your maps even more useful: This has been a tutorial on creating the most basic Google Map, but the API includes functions that can do much more. You’ve just made a dynamic Google Map! Advanced Techniques The map points will show up as red pins, and when you hover your cursor over each one, the name of the place will appear. One of them should look pretty much like this: Take a look again at all three example maps.
#PHP MAKER CONNECT TWO TABLES CODE#
Add this bit of code into map.php right after mapOptions), and the map points that we set in our database table will show up in each of our example maps:ĭie('There was an error running the queryĮcho ' var myLatlng1 = new ('. Raw maps are great if you just want to show your site’s visitors a specific part of the world, but Google Maps are infinitely more useful with map points added. Try map.php?id=2 and map.php?id=3 for maps of two of my other favorite cities in the world. Try loading map.php?id=1, and a map of Portland, OR should display. Notice that if you load the page map.php, you will get an error, since the page requires the id variable to be set. The PHP we’ve added at the top of the script queries your database, selects the map details to match whatever map ID has been specified, and sets them into variables for the map to use. The HTML portion of this page (from ) is provided by Google, and is the simplest code possible for displaying a basic map. Make sure you replace the value of the $apikey variable with your own API key. Var map = new (document.getElementById("map-canvas"), If(!$result = $con->query($createmappointtable)) $createmappointtable = 'CREATE TABLE IF NOT EXISTS mappoints ( This is where we’re going to set up our data tables to populate our map:ĭie('There was an error running the query ') Next, start another new PHP file, and call this one create.php. Replace the host, user, password, and databasename variables with the correct ones for your database, and your connection script should be good to go. If you took our PHP Basics: MySQL tutorial (LINK), you’ll recognize this code as the same MySQL connection code that we used there. First, put the following code in a new PHP file, called connect.php:ĭie('Unable to connect to database ') There are several ways to go about this, but here is an example that will work for our purposes. In order to use PHP and MySQL to build dynamic maps for your application, you’ll need database tables to store the geographic information that will be displayed on the map. If you have a Google account (through GMail or another Google service) already, then it’s pretty much a one-click process. This is a long alphanumeric code that allows you access to Google’s API code. The other thing that you’ll need to get started with Google Maps is a Google API key. If you’re brand new to both programs, you can check out our Introduction to PHP and PHP Basics: MySQL tutorials to get up to speed. Getting Startedįor this tutorial, I’m going to assume that you have PHP and MySQL installed, and that you’ve done some basic programming with both. This lesson is going to walk you through using PHP and MySQL with Google Maps to create maps that are attractive, useful, and customizable. There are other players (Yahoo, Bing, etc), but the vast majority of online map users are using Google Maps, so if you are programming a map into your site or app, you can’t avoid working with Google.> The good news is, Google’s Maps API is actually quite user friendly and easy to integrate into a PHP / MySQL application. Just as it has with search, Google has all but cornered the market in online mapping. Not every web application needs maps, but they can enhance many of them. Maps are perfect examples of modern web philosophy, visually representing data and also taking advantage of the mobile web by allowing sites and apps to be customized by location.
0 kommentar(er)
