1

I want to embed a google map with several locations. So far I found this html code:

<iframe
  src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBECBmDGXDR_37hLJU-zjMSZ65OIA4Ikek
  &q=Theophiledonnéstraat+79+3540+Donk
  " allowfullscreen>
</iframe>

This works perfectly but only shows one marker. I want to add several other markers like this:

<iframe
  src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBECBmDGXDR_37hLJU-zjMSZ65OIA4Ikek
  &q=Theophiledonnéstraat+79+3540+Donk
  &q=Dorpsstraat+29+3770+Riemst
  " allowfullscreen>
</iframe>

I use this simple API because i need to add the locations based on a database request, therefore the easiest solution is to add data with PHP.

I hope you guys can help!

4

1 回答 1

1

在这里尝试添加多个位置的问题是查询字符串（GET 请求）的长度有限，因此您可能会发现太多位置会破坏地图。

除了使用最初显示的方法，您是否可以不创建一个 php 脚本（iframemap.php例如调用）并将其用作 iframe 的源。这个 php 页面可以连接到数据库以检索您想要的任何标记的结果并在运行时对其进行地理编码。您还可以将地理编码的结果作为 lat/lng 保存回数据库，以便将来的请求使用数据库中的 lat/lng 信息。

somepage.html ( or php, htm etc )
---------------------------------

<iframe src='iframemap.php' allowfullscreen></iframe>



iframpmap.php
-------------
<?php

    $dbhost =   'localhost';
    $dbuser =   'root'; 
    $dbpwd  =   'xxx'; 
    $dbname =   'xxx';
    $db     =   new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );

    $places=array();

    $sql    =   'select `location` from `maps` limit 100';
    $res    =   $db->query( $sql );
    if( $res ){
        while( $rs=$res->fetch_object() ) $places[]=$rs->location;
    }
    $db->close();
?>
<!doctype html>
<html> 
    <head> 
        <meta charset='utf-8' /> 
        <title>Google Maps i-Frame source</title> 
        <script src='https://maps.google.com/maps/api/js' type='text/javascript'></script>
        <script type='text/javascript'>
            document.addEventListener( 'DOMContentLoaded', function(){
                if( typeof( 'google' )=='undefined' ){
                    return false;
                }

                /* The contents of `places` could EASILY be derived from a database query */
                var places = [
                    'Theophiledonnéstraat+79+3540+Donk',
                    'Dorpsstraat+29+3770+Riemst',
                    'Kosterstraat+2,+3631+Maasmechelen,+Belgium'
                ];
                <?php
                    echo 'places=' . json_encode( $places ) . ';';
                ?>

                var oMap = document.getElementById('map');
                var geocoder = new google.maps.Geocoder();
                var bounds = new google.maps.LatLngBounds();
                var map = new google.maps.Map( oMap, {
                    zoom: 10,
                    draggable:true,
                    center: new google.maps.LatLng( 50.805697, 5.598648 ),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                for( var i = 0; i < places.length; i++ ) {
                    geocoder.geocode( { address:places[ i ] }, function ( results,status ){
                        if( status === google.maps.GeocoderStatus.OK ) {

                            var location = results[0].geometry.location;
                            var marker = new google.maps.Marker({
                                position:{ lat:location.lat(),lng:location.lng() },
                                map:map
                            });
                            bounds.extend( marker.position );
                            map.fitBounds( bounds );
                        }
                    });
                }
            },false )
        </script>
    </head>
    <style>
        html, html body, #map{height:100%;width:100%;padding:0;margin:0; }
    </style>
    <body>
        <div id='map'></div>
    </body>
</html>
于 2016-02-21T12:58:09.897 回答