How to Get Google Maps JavaScript API Key<\/a><\/span><\/p>\nCreate Database Table<\/h2>\n
To store the dynamic locations information and marker images a table is required in the database. The following SQL creates a locations<\/code> table with some basic fields 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 `icon`<\/span> varchar<\/span>(255<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span> COMMENT<\/span> 'Marker icon'<\/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>\nFetch Location and Marker Image Info from Database<\/h2>\n
The latitude and longitude are fetched from the database using PHP and MySQL.<\/p>\n
\n- The first result set is used to generate multiple markers and custom icons information (location, latitude, longitude, and icon image source).<\/li>\n
- The second result set is used to generate the content of the 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 Custom Images<\/h2>\n
Load the Google Map JavaScript API and specify an API key in the key<\/code> 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 custom icons to Google Map from the database in PHP.<\/p>\n
\n- The initMap()<\/b> is a custom JavaScript function that initializes Google Maps.<\/li>\n
- Define the Google Maps object and attach the map to the HTML element.<\/li>\n
- Fetch the latitude, longitude, and marker icon image URL from the database and generate position array for multiple markers (
markers<\/code>).<\/li>\n- Fetch the location info from the database and generate array for the content of info windows (
infoWindowContent<\/code>).<\/li>\n- Add multiple markers with dynamic locations and custom icon 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<\/ul>\n
Load initMap()<\/code> function to initialize the Google Map.<\/p>\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