I have file called map.php which shows the location of 2 markers. I have created an iframe inside another php file ( index.php) to call the map.php inside a container as you can see in the picture Current, i have added the HTML code below.
HTML (inside index.php)
<div class="img-container" id="image_container"> <iframe style="width:15vw;height:18vh" frameborder="0" src= "map.php" ></iframe> //calling map.php </div> Now i when i load the main page i get the center of the map in both the containers( same marker positions) Current, as the center is set to a specific lat and long.
What i want to achieve: What I'm aiming for , since i have two markers i want the marker 1 to appear in container 1 and marker 2 to appear in container 2 as shown in the What I'm aiming for. I have spend a lot of time searching for this and couldn't find an answer on how to initiate this. i have also added my map.php below. Thanks a lot for your time. Please help me if you can.
MAP.php
<?php //Database connection and gets lat and long values for one marker: //Note : the second marker has a manually entered lat and long ?> <!DOCTYPE html> <html lang="en"> <head> <script src='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css' rel='stylesheet' /> <title>Map.php</title> </head> <style> #map{ position:absolute; top:0px; left:0px; } </style> <body> <div id ='map' style ='width: 112.75vw; height: 163.5vh;'> </div> <script> var cordinate_values=<?php echo json_encode($output); ?>; const coordinates_1 = cordinate_values; const [lng, lat] = coordinates_1.split(','); mapboxgl.accessToken = 'pk.eyJ1IjoiZXNxdWlsYXgiLCJhIjocW8xcnRja2tqdiJ9.7z7Eyrj3iexJ9uDVYIT0yw'; var map = new mapboxgl.Map({ container: 'map', style:'mapbox://styles/joelcherian/ckkg9x7f2063917o1kexgn9ho', center: [lng, lat], // the lat and long positions coming from Database zoom: 12 }); ////// FIRST MARKER /////// var marker1 = new mapboxgl.Marker({color:"#ff3300",dragable:true,scale:0.7}).setLngLat([lng, lat]).addTo(map) ////// SECOND MARKER /////// var marker2 = new mapboxgl.Marker({color:"#ff3300",dragable:true,scale:0.7}).setLngLat([115.849, -32.011]) .addTo(map) </script> </body> </html> 
没有评论:
发表评论