встроенная карта Google с несколькими маркерами

Question

встроенная карта Google с несколькими маркерами

Я хочу встроить карту Google с несколькими местоположениями. До сих пор я нашел этот HTML-код:

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

Это работает отлично, но показывает только один маркер. Я хочу добавить несколько других маркеров, как это:

<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>

Я использую этот простой API, потому что мне нужно добавлять местоположения на основе запроса к базе данных, поэтому самое простое решение — добавить данные с помощью PHP.

Я надеюсь, что вы, ребята, можете помочь!

1

google-maps google-maps-embed html5 php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Проблема с добавлением нескольких местоположений, как вы пытаетесь здесь, заключается в том, что у строк запросов (запросов GET) конечная длина, поэтому вы можете обнаружить, что слишком много местоположений нарушат карту.

Вместо того, чтобы использовать метод, показанный первоначально, вы не могли бы создать скрипт php (называемый iframemap.php например) и использовать его в качестве источника для iframe. Эта страница php может подключиться к базе данных, чтобы получить результаты для любых маркеров, которые вы хотите, и геокодировать их во время выполнения. Вы также можете сохранить результаты геокодирования обратно в БД в виде lat / lng, чтобы в будущих запросах использовалась информация о широте / 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>

1