PHP . SU
Программирование на PHP, MySQL и другие веб-технологии
Описание: google maps
Поиск в теме | Версия для печати
algebra
Отправлено: 04 Августа, 2019 - 22:48:57
Частый гость
Покинул форум
Сообщений всего: 171
Дата рег-ции: Февр. 2011
Помог: 0 раз(а)
Задача:
дать возможность пользователю поставить собственную метку с кратким описанием.
Проблема:
Карта google загружается, метки из базы данных берутся, а функция initialize() почему-то работать не хочет.
Подскажите как подправить этот код?
map.blade.php
Спойлер (Отобразить )
PHP:
скопировать код в буфер обмена
< html>
< head>
< meta http- equiv= "content-type" content= "text/html; charset=utf-8" />
< title> Google Maps - добавление меток пользователями</ title>
{ !! $map [ "js" ] !! }
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></ script>
< script type= "text/javascript" >
var marker;
function initialize( ) {
if ( GBrowserIsCompatible( ) ) {
var map = new GMap2( document. getElementById( "map_canvas" ) ) ;
var map = new GMap2( document. getElementById( "map_canvas" ) ) ;
map. setCenter( new GLatLng( 56. 32811, 44. 0) , 15) ;
map. addControl( new GLargeMapControl( ) ) ;
map. addControl( new GMapTypeControl( ) ) ;
GEvent. addListener( map, "click" , function ( overlay, latlng) {
if ( latlng) {
marker = new GMarker( latlng, { draggable: true } ) ;
GEvent. addListener( marker, "click" , function ( ) {
var html = "<table>" +
"<tr><td>Наименование:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Адрес:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Тип:</td> <td><select id='type'>" +
"<option value='bar' SELECTED>Работа</option>" +
"<option value='restaurant'>Дом</option>" +
"<option value='cafe'>Дача</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Сохранить' onclick='saveData()'/></td></tr></form>" ;
marker. openInfoWindow( html) ;
} ) ;
map. addOverlay( marker) ;
}
} ) ;
}
}
</script>
</ head>
< body onload= "initialize()" onunload= "GUnload()" >
< div class = "container" >
< script src= "https://maps.googleapis.com/maps/api/js?key=secret" ></ script>
{ !! $map [ "html" ] !! }
< div id= "directionsDiv" ></ div>
< div id= "map_canvas" style= "width: 800px; height: 600px" ></ div>
< div id= "message" ></ div>
</ div>
</ body>
</ html>
MapController.php
Спойлер (Отобразить )
PHP:
скопировать код в буфер обмена
<?PHP
namespace App\Http\Controllers\Site;
use FarhanWazir\GoogleMaps\GMaps;
use App\Http\Controllers\Controller;
//use Request;
class MapController extends Controller
{
public function map( )
{
$config [ 'center' ] = 'Sydney Airport,Sydney' ;
$config [ 'zoom' ] = '13' ;
$config [ 'map_height' ] = '400px' ;
$config [ 'geocodeCaching' ] = true ;
$config [ 'directions' ] = true ;
$config [ 'directionsStart' ] = 'Sydney Airport,Sydney' ;
$config [ 'directionsEnd' ] = 'Kogarah Golf Club,Sydney' ;
$config [ 'directionsDivID' ] = 'directionsDiv' ;
$gmap = new GMaps( ) ;
$gmap -> initialize ( $config ) ;
$marker [ 'position' ] = 'Sydney Airport,Sydney' ;
$marker [ 'infowindow_content' ] = 'Sydney Airport,Sydney' ;
$gmap -> add_marker ( $marker ) ;
$marker [ 'position' ] = 'Kogarah Golf Club,Sydney' ;
$marker [ 'infowindow_content' ] = 'Kogarah Golf Club,Sydney' ;
$gmap -> add_marker ( $marker ) ;
$marker [ 'position' ] = 'The Lakes Golf Club,Sydney' ;
$marker [ 'infowindow_content' ] = 'The Lakes Golf Club,Sydney' ;
$gmap -> add_marker ( $marker ) ;
$map = $gmap -> create_map ( ) ;
return view
( 'site.map' , compact ( 'map' ) ) ; }
}
Vladimir Kheifets
Отправлено: 05 Августа, 2019 - 08:51:18
Частый посетитель
Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017
Откуда: Германия, Бавария
Помог: 37 раз(а)
algebra пишет: Задача:
дать возможность пользователю поставить собственную метку с кратким описанием.
Проблема:
Карта google загружается, метки из базы данных берутся, а функция initialize() почему-то работать не хочет.
Подскажите как подправить этот код?
map.blade.php
Спойлер (Отобразить )
PHP:
скопировать код в буфер обмена
< html>
< head>
< meta http- equiv= "content-type" content= "text/html; charset=utf-8" />
< title> Google Maps - добавление меток пользователями</ title>
{ !! $map [ "js" ] !! }
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></ script>
< script type= "text/javascript" >
var marker;
function initialize( ) {
if ( GBrowserIsCompatible( ) ) {
var map = new GMap2( document. getElementById( "map_canvas" ) ) ;
var map = new GMap2( document. getElementById( "map_canvas" ) ) ;
map. setCenter( new GLatLng( 56. 32811, 44. 0) , 15) ;
map. addControl( new GLargeMapControl( ) ) ;
map. addControl( new GMapTypeControl( ) ) ;
GEvent. addListener( map, "click" , function ( overlay, latlng) {
if ( latlng) {
marker = new GMarker( latlng, { draggable: true } ) ;
GEvent. addListener( marker, "click" , function ( ) {
var html = "<table>" +
"<tr><td>Наименование:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Адрес:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Тип:</td> <td><select id='type'>" +
"<option value='bar' SELECTED>Работа</option>" +
"<option value='restaurant'>Дом</option>" +
"<option value='cafe'>Дача</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Сохранить' onclick='saveData()'/></td></tr></form>" ;
marker. openInfoWindow( html) ;
} ) ;
map. addOverlay( marker) ;
}
} ) ;
}
}
</script>
</ head>
< body onload= "initialize()" onunload= "GUnload()" >
< div class = "container" >
< script src= "https://maps.googleapis.com/maps/api/js?key=secret" ></ script>
{ !! $map [ "html" ] !! }
< div id= "directionsDiv" ></ div>
< div id= "map_canvas" style= "width: 800px; height: 600px" ></ div>
< div id= "message" ></ div>
</ div>
</ body>
</ html>
MapController.php
Спойлер (Отобразить )
PHP:
скопировать код в буфер обмена
<?PHP
namespace App\Http\Controllers\Site;
use FarhanWazir\GoogleMaps\GMaps;
use App\Http\Controllers\Controller;
//use Request;
class MapController extends Controller
{
public function map( )
{
$config [ 'center' ] = 'Sydney Airport,Sydney' ;
$config [ 'zoom' ] = '13' ;
$config [ 'map_height' ] = '400px' ;
$config [ 'geocodeCaching' ] = true ;
$config [ 'directions' ] = true ;
$config [ 'directionsStart' ] = 'Sydney Airport,Sydney' ;
$config [ 'directionsEnd' ] = 'Kogarah Golf Club,Sydney' ;
$config [ 'directionsDivID' ] = 'directionsDiv' ;
$gmap = new GMaps( ) ;
$gmap -> initialize ( $config ) ;
$marker [ 'position' ] = 'Sydney Airport,Sydney' ;
$marker [ 'infowindow_content' ] = 'Sydney Airport,Sydney' ;
$gmap -> add_marker ( $marker ) ;
$marker [ 'position' ] = 'Kogarah Golf Club,Sydney' ;
$marker [ 'infowindow_content' ] = 'Kogarah Golf Club,Sydney' ;
$gmap -> add_marker ( $marker ) ;
$marker [ 'position' ] = 'The Lakes Golf Club,Sydney' ;
$marker [ 'infowindow_content' ] = 'The Lakes Golf Club,Sydney' ;
$gmap -> add_marker ( $marker ) ;
$map = $gmap -> create_map ( ) ;
return view
( 'site.map' , compact ( 'map' ) ) ; }
}
Добрый день!
1. В map.blade.php Вы показали JS function initialize()
В ней не определена переменная [b]latlng [/b]
Вам нужно посмотреть в консоле браузера ошибки JS
2. В MapController.php PHP-class GMaps()
Не очень понятно как метод initialize PHP-класса GMaps()
связан с JS function initialize() из map.blade.php
Удачи!
andrewkard
Отправлено: 05 Августа, 2019 - 11:03:03
Участник
Покинул форум
Сообщений всего: 1372
Дата рег-ции: Нояб. 2014
Помог: 30 раз(а)
Добрый день.
Нужно дебажить, смотрите в консоли что пишет, есть ошибки?
точно не срабатывает?
Попробуйте просто
(Отредактировано автором: 05 Августа, 2019 - 11:08:22)
andrewkard
Отправлено: 05 Августа, 2019 - 21:38:38
Участник
Покинул форум
Сообщений всего: 1372
Дата рег-ции: Нояб. 2014
Помог: 30 раз(а)
LIME пишет: сработает до подгрузки скриптов и создания элементов
решал так
CODE (
javascript ):
скопировать код в буфер обмена
var initialize = function ( ) {
return initMap( parseFloat( $( "#show-map" ) .attr ( "data-lat" ) ) , parseFloat( $( "#show-map" ) .attr ( "data-lng" ) ) , $( "#show-map" ) .attr ( "data-title" ) , true ) ;
} ;
CODE (
javascript ):
скопировать код в буфер обмена
$( '#show-map' ) .click ( function ( e) {
e.preventDefault ( ) ;
var el = $( this ) ;
var active = $( el) .attr ( 'data-active' ) ;
var key = $( el) .attr ( 'data-key' ) ;
if ( active == 1 ) {
$( el) .text ( $( el) .attr ( 'data-text-show' ) ) ;
$( el) .attr ( 'data-active' , 0) ;
} else {
$( el) .attr ( 'data-active' , 1) ;
$( el) .text ( $( el) .attr ( 'data-text-hide' ) ) ;
}
$( "#map" ) .slideToggle ( "slow" , function ( ) {
if ( active == 0) {
getMapScript( key) ;
}
} ) ;
} ) ;
CODE (
javascript ):
скопировать код в буфер обмена
function getMapScript( key) {
if ( ! window.google ) {
var script = document.createElement ( 'script' ) ;
script.type = 'text/javascript' ;
script.src = '//maps.googleapis.com/maps/api/js?key=' + key+ '&language=uk®ion=UA&callback=initialize' ;
document.getElementsByTagName ( 'head' ) [ 0] .appendChild ( script) ;
} else {
initialize( ) ;
}
}
CODE (
javascript ):
скопировать код в буфер обмена
function initMap( lat, lng, title, drag) {
var myLatLng = { lat: lat, lng: lng} ;
var map = new google.maps .Map ( document.getElementById ( 'map' ) , {
zoom: 15,
center: myLatLng
} ) ;
var marker = new google.maps .Marker ( {
position: myLatLng,
map: map,
title: title,
draggable: drag
} ) ;
google.maps .event .addListener ( marker, 'dragend' , function ( marker) {
var latLng = marker.latLng ;
currentLatitude = latLng.lat ( ) ;
currentLongitude = latLng.lng ( ) ;
$( '#post-latitude' ) .val ( currentLatitude) ;
$( '#post-longitude' ) .val ( currentLongitude) ;
} ) ;
}
algebra
Отправлено: 05 Августа, 2019 - 23:11:46
Частый гость
Покинул форум
Сообщений всего: 171
Дата рег-ции: Февр. 2011
Помог: 0 раз(а)
Хорошо, спрошу по-другому (потому как запуталась в этих мапах):
1. Есть контролер с метками из БД (в шапке темы)
его менять не будем
2. А в блэйд такого вида (спойдер) надо добавить функцию добавления меток
Напишите пожалуйста
Спойлер (Отобразить )
PHP:
скопировать код в буфер обмена
< html>
< head>
< title> Laravel Google Maps Example</ title>
{ !! $map [ "js" ] !! }
</ head>
< body>
< script src= "https://maps.googleapis.com/maps/api/js?key=secret" ></ script>
< div class = "container" >
{ !! $map [ "html" ] !! }
< div id= "directionsDiv" ></ div>
</ div>
</ body>
</ html> ';
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Вопросы новичков »
Все гости форума могут просматривать этот раздел. Только зарегистрированные пользователи могут создавать новые темы в этом разделе. Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
Powered by ExBB FM 1.0 RC1. InvisionExBB