In this relatively short blog post we'll use PHP/MySQL and Google Maps Javascript API to display locations from a MySQL database on a map.

Đang xem: Google map with a marker with php & google map api

We'll make a simple “City guide to Zagreb”, meaning we'll select interesting locations from the database, display them on a map, show some info about them and show directions from user's current position to a location of his/her choice.

Xem thêm: Email Validation In Php Forms Validate E Mail Regex, Php Forms Validate E

*

What you'll need

PHP/MySQL Development EnvironmentSome understanding of JavaScriptSome free time

As you can see it's really easy to get started. So, let's do it!

The Database

First, let's create a table for our data:

CREATE TABLE `locations` (`id` INT(10) NOT NULL AUTO_INCREMENT,`name` VARCHAR(150) NOT NULL,`address` VARCHAR(255) NOT NULL,`lat` FLOAT(10,6) NOT NULL,`lon` FLOAT(10,6) NOT NULL,`description` TEXT NOT NULL,PRIMARY KEY (`id`))COLLATE='utf8_general_ci'ENGINE=InnoDBThen, use phpMyAdmin or your favorite MySQL client to enter some data about locations. Or, if you don't feel like it, here's my data:

INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (1, 'Archaeological Museum', 'Nikola Šubić Zrinski Square 19, 10000, Zagreb, Croatia', 45.823704, 15.990757, 'The Archaeological Museum in Zagreb, Croatia is an archaeological museum with over 450,000 varied artifacts and monuments, gathered from various sources.');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (2, 'Modern Gallery', 'Andrije Hebranga 1, 10000, Zagreb, Croatia', 45.809280, 15.977570, 'Modern Gallery is a museum in Zagreb, Croatia that holds the most important and comprehensive collection of paintings, sculptures and drawings by 19th and 20th century Croatian artists.');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (3, 'Technical Museum', 'Savska cesta 18, 10000, Zagreb, Croatia', 45.803555, 15.965023, 'The museum was founded in 1954 and it maintains the oldest preserved steam engine in the area, dating from the mid-19th century, which is still operational.');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (4, 'St. Mark's Church', 'Saint Mark's Square 5, 10000, Zagreb, Croatia', 45.816677, 15.973806, 'The Romanesque window found in its south facade is the best evidence that the church must have been built as early as the 13th century as is also the semicircular groundplan of St. Mary's chapel');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (5, 'Zagreb Cathedral', 'Kaptol 31, 10000, Zagreb, Croatia', 45.816723, 15.978199, 'Zagreb Cathedral on Kaptol is the most famous building in Zagreb, and the tallest building in Croatia.');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (6, 'The Grounded Sun', 'Bogovićeva, 10000, Zagreb, Croatia', 45.812180, 15.975432, 'Nine Views is an ambiental installation in Zagreb, Croatia which, together with the sculpture The Grounded Sun, makes up a consistent model of solar system.');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (7, 'Croatian National Theatre', 'Marshal Tito Square 15, 10000, Zagreb, Croatia', 45.810184, 15.970123, 'The Croatian National Theatre in Zagreb is a theatre located in Zagreb, owned and operated by the Ministry of Culture');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (8, 'Museum of Contemporary Art', 'Dubrovnik Avenue 17, 10000, Zagreb, Croatia', 45.777695, 15.977888, 'The museum traces its origins from the City Gallery of Contemporary Art which was established in 1954.');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (9, 'Maksimir Park', 'Maksimir Park, 10000, Zagreb, Croatia', 45.829090, 16.019424, 'Maksimir Park features artificial lakes, an Echo Pavilion and the 19th century Bellevue Pavilion.');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (10, 'Mimara Museum', 'Trg Franklina Delanoa Roosevelta 5, 10000, Zagreb, Croatia', 0.000000, 0.000000, 'It is located in a late 19th century neo-Renaissance palace. The holdings comprise 3,750 works of art of various techniques and materials, and different cultures and civilizations.');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (11, 'Strossmayer Gallery of Old Masters', 'Nikola Šubić Zrinski Square 11, 10000, Zagreb, Croatia', 45.823704, 15.990757, 'The Strossmayer Gallery holding includes around 4,000 works, of which some 250 are on display, with the remainder in storage, or on display at other museums or gallery institutions in Croatia.');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (12, 'Vatroslav Lisinski Concert Hall', 'Stjepan Radić Square 4, 10000, Zagreb, Croatia', 0.000000, 0.000000, 'Vatroslav Lisinski Concert Hall is a large concert hall and convention center in Zagreb, Croatia. It is named after Vatroslav Lisinski, a 19th-century Croatian composer.');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (13, 'Lotrščak Tower', 'Dverce, 10000, Zagreb, Croatia', 45.814510, 15.973316, 'The tower, which dates to the 13th century, was built to guard the southern gate of the Gradec town wall.');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (14, 'Jarun Lake', 'Jarun Lake, 10000, Zagreb, Croatia', 45.783333, 15.916667, 'Jarun Lake is a popular getaway for residents any time of year but especially in the summer when the clear waters are ideal for swimming.');INSERT INTO `locations` (`id`, `name`, `address`, `lat`, `lon`, `description`) VALUES (15, 'Botanical Garden', 'Trg Marka Marulica 9a, Zagreb, Croatia (Botanical Gardens)', 0.000000, 0.000000, 'In addition to 10,000 species of plant, including 1800 tropical flora specimens, the landscaping has created restful corners and paths that seem a world away from bustling Zagreb.');NOTE that some locations have empty coordinates, and have only their addresses entered. This is deliberate so we can write code to handle those situations as well. If we encounter a location without coordinates entered into the database, we'll try to Geocode it's address into coordinates.

Xem thêm: Lời Giải Đáp Cho Thắc Mắc: Ung Thư Lan Tỏa, Các Loại U Gan Thường Gặp

Create a Simple map

First, let's create a simple map, just to verify how things should work in a map.

Create a new file named index.html which will display our results and do other cool stuff with maps. For now, we'll only create a basic map:

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *