How to Get Google Maps JavaScript API Key<\/a><\/li>\n<\/ul>\nOnce you got the API key from Google API Console, copy this API key for later use in the script on Google Maps JavaScript API request.<\/p>\n
Create Database Table<\/h2>\n
To store the locations data a table needs to be created in the database. The following SQL creates a locations<\/code> table with some basic fields (latitude, longitude, location name, and info) in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `locations`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `latitude`<\/span> varchar<\/span>(20<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `longitude`<\/span> varchar<\/span>(20<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `name`<\/span> varchar<\/span>(100<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `info`<\/span> varchar<\/span>(255<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nDatabase Configuration (dbConfig.php)<\/h2>\n
The dbConfig.php<\/code> file is used to connect and select the database. Specify the database host ($dbHost<\/code>), username ($dbUsername<\/code>), password ($dbPassword<\/code>), and name ($dbName<\/code>) as per your MySQL database credentials.<\/p>\n<?php
<\/span>\/\/ Database configuration
<\/span>$dbHost <\/span>= <\/span>\"localhost\"<\/span>;
<\/span>$dbUsername <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbPassword <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbName <\/span>= <\/span>\"codexworld\"<\/span>;
<\/span>\/\/ Create database connection
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
<\/span>\/\/ Check connection
<\/span>if (<\/span>$db<\/span>-><\/span>connect_error<\/span>) {
die(<\/span>\"Connection failed: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}<\/span><\/pre>\nGet Location Info from Database<\/h2>\n
The latitude and longitude of the multiple locations are fetched from the database using PHP and MySQL.<\/p>\n
\n- The first result set is used to generate multiple markers info (location, latitude, and longitude).<\/li>\n
- The second result set is used to generate content of info windows.<\/li>\n<\/ul>\n
<?php
<\/span>\/\/ Include the database configuration file
<\/span>require_once <\/span>'dbConfig.php'<\/span>;
<\/span>\/\/ Fetch the marker info from the database
<\/span>$result <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM locations\"<\/span>);
<\/span>\/\/ Fetch the info-window data from the database
<\/span>$result2 <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM locations\"<\/span>);
<\/span>?><\/span><\/pre>\nAdd Multiple Markers with Info Windows<\/h2>\n
Load the Google Map JavaScript API and specify an API key in the key parameter.<\/p>\n
<script<\/span> src<\/span>=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=Your_API_KEY<\/span>\"<\/span>><\/script<\/span>><\/pre>\nThe following JavaScript code adds multiple markers with info windows to Google map from the MySQL database in PHP.<\/p>\n
\n- The initMap() is a JavaScript function that handles Google Map creation functionality.<\/li>\n
- Initialize Google Maps object to attach the map to the HTML element.<\/li>\n
- Retrieve latitude & longitude from the database and generate position array for multiple markers (
markers<\/code>).<\/li>\n- Retrieve location info from the database and generate array for info windows content (
infoWindowContent<\/code>).<\/li>\n- Add multiple markers with dynamic locations to Google Map.<\/li>\n
- Add info window with dynamic content to the markers.<\/li>\n
- Set zoom level of the Google Map.<\/li>\n
- Load initialize the initMap() function.<\/li>\n<\/ul>\n
<script<\/span>><\/span>\r\nfunction<\/span> initMap<\/span>(<\/span>) <\/span>{\r\n var<\/span> map;\r\n var<\/span> bounds = new<\/span> google.maps.LatLngBounds();\r\n var<\/span> mapOptions = {\r\n mapTypeId: 'roadmap'<\/span>\r\n };\r\n \r\n \/\/ Display a map on the web page<\/span>\r\n map = new<\/span> google.maps.Map(document<\/span>.getElementById(\"mapCanvas\"<\/span>), mapOptions);\r\n map.setTilt(50<\/span>);\r\n \r\n \/\/ Multiple markers location, latitude, and longitude<\/span>\r\n var<\/span> markers = [\r\n <?php <\/span>if(<\/span>$result<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
while(<\/span>$row <\/span>= <\/span>$result<\/span>-><\/span>fetch_assoc<\/span>()){
echo <\/span>'[\"'<\/span>.<\/span>$row<\/span>[<\/span>'name'<\/span>].<\/span>'\", '<\/span>.<\/span>$row<\/span>[<\/span>'latitude'<\/span>].<\/span>', '<\/span>.<\/span>$row<\/span>[<\/span>'longitude'<\/span>].<\/span>'],'<\/span>;
}
}
<\/span>?><\/span>\r\n ];\r\n \r\n