Combineren meerdere Google maps en php/mysql

[tj.jackel]

Beste tweakers,

In een mysql database staan namen met locaties (latitude, longitude). Deze wil ik in google maps weergegeven. Het weergeven van 1 marker vanuit de database gaat goed. Maar als ik een foreach loop toe wil voegen zodat automatisch meerdere markers geplot worden werkt het niet meer. Kan iemand mij helpen? Hier onder is de querry en de google maps code weergegeven.

HTML:

<?php // First we execute our common code to connection to the database and start the session
    require("common.php");
    
    // At the top of the page we check to see whether the user is logged in or not
    session_start();
    //Format the page from the database data

$query = "
        SELECT Name, latitude, longitude FROM units UNION ALL SELECT NameOfEvent, latitude, longitude FROM events WHERE latitude != 0 or longitude !=0
        ";
        
    
    try
    {
        // These two statements run the query against your database table.
        $stmt = $db->prepare($query);
        $stmt->execute();
    }
    catch(PDOException $ex)
    {
        // Note: On a production website, you should not output $ex->getMessage().
        // It may provide an attacker with helpful information about your code. 
        
    }
    $rows = $stmt->fetchAll();
    
    //Format the page from the database data


?>

HTML:

><script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>

var myCenter=new google.maps.LatLng(0,0);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

<?php foreach($rows as $row): ?>
var latitude = '<?php foreach($rows as $row): echo htmlentities($row['latitude'], ENT_QUOTES, 'UTF-8'); endforeach;?>';
var longitude = '<?php foreach($rows as $row): echo htmlentities($row['longitude'], ENT_QUOTES, 'UTF-8'); endforeach;?>';
var newMarker=new google.maps.LatLng(latitude,longitude);

if(latitude != 0 || longitude !=0){
var marker=new google.maps.Marker({
  position:newMarker,
  });

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
  content:"<?php foreach($rows as $row): echo htmlentities($row['Name'], ENT_QUOTES, 'UTF-8'); endforeach;?>"
  });

infowindow.open(map,marker);
}
}

<?php endforeach; ?>

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Alvast bedankt.

[NMe]

Je zet één marker neer in je code. Wat denk je zelf dat dat precies gaat doen? Hoe moet die code begrijpen dat je een variabele - die een integer hoort te zijn - vult met een lijst van integers die samen een string vormen?

[Xudonax]

Ik zou beginnen met de foreach naar JavaScript te verplaatsen en hooguit een lijst met lat/lon dictionaries via PHP te zetten. Dat maakt het geheel
a) een stuk overzichtelijker (je voert één stuk code X keer uit, in plaats van X gelijke stukken code één keer);
b) debugbaar via de browser;
c) een stuk efficiënter doordat je minder loops doet aan de server kant; en
d) een stuk kleiner om te downloaden voor de eindgebruiker (hoewel dat op te lossen is met compressie)

Daarna ga je waarschijnlijk vrij eenvoudig zien wat er precies mis gaat. Hint: Je endforeach staat na het einde van je functie

Volgens mij zou een code zoals dit een heel eind op weg moeten zijn om te werken. Let op, dit is uit de losse pols geschreven zonder het te testen

HTML:

<script>
    <?php 
        $positions = array();

        foreach($rows as $row)
        {
            $positions[] = array(
                'lat' => $row['latitude'], 
                'lon' => $row['longitude'], 
                'name' => $row['Name']);
        }
    ?>

    var positions = <?php echo json_encode(array_values($positions)); ?>; 

    function initialize()
    {
        var mapProp = {
            center: myCenter,
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

        for(var i = 0; i < positions.length; i++)
        {
            var lat = positions[i]['lat'];
            var lon = positions[i]['lon'];
            var name = positions[i]['name'];

            var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lon) });
            marker.setMap(map)

            var infoWindow = new google.maps.InfoWindow({ content: name });
            infoWindow.open(map, marker);
        }
    }
</script>

[tj.jackel]

Bedankt voor de snelle reacties. @Xudonax ik heb de code toegevoegd. Vind de oplossing best mooi en de pagina opent zonder fouten alleen zie ik geen markers op de google maps.
De code momenteel:

PHP:

<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>

var myCenter=new google.maps.LatLng(0,0);

<?php 
        $positions = array();

        foreach($rows as $row)
        {
            $positions[] = array(
                'lat' => $row['latitude'], 
                'lon' => $row['longitude'], 
                'name' => $row['Name']);
        }
    ?>

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);



//if(latitude != 0 || longitude !=0){
for(var i = 0; i < positions.length; i++)
        {
            var lat = positions[i]['lat'];
            var lon = positions[i]['lon'];
            var name = positions[i]['name'];

            var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lon) });
            marker.setMap(map)

            var infoWindow = new google.maps.InfoWindow({ content: name });
            infoWindow.open(map, marker);
        }
//}

}



google.maps.event.addDomListener(window, 'load', initialize);
</script>

[ Voor 82% gewijzigd door tj.jackel op 03-07-2016 17:15 ]

[NMe]

Dan ga je even debuggen? Welke waardes hebben lat, lon en name, bijvoorbeeld? Een klein beetje eigen inzet mag wel...

[tj.jackel]

Dat heb ik gedaan (was even zoeken hoe ik dat moest doen). De informatie wordt goed opgehaald uit de mysql database en het staat goed in de $rows. Echter kom ik er niet uit hoe ik de gegevens uit die $position array kan echo'en.

[NMe]

Ik heb het over het debuggen van je javascript.

[tj.jackel]

Bedankt voor de tip (ik wist niet dat het javascript was).
Ik heb met behulp van window.alert gekeken welke delen van de code aangeroepen worden:
- de initialize wordt aangeroepen.
- Deze werkt tot aan de for loop.

Ik heb het idee dat de for loop niet aangeroepen wordt.
Daarnaast vermoed ik dat de positions array niet gevuld is.
Met window.alert(positions.length) krijg ik geen box en dit gebeurd ook wanneer ik window.alert(0) probeer aan te roepen.

[johnkeates]

tj.jackel schreef op zondag 03 juli 2016 @ 19:07:
Bedankt voor de tip (ik wist niet dat het javascript was).
Ik heb met behulp van window.alert gekeken welke delen van de code aangeroepen worden:
- de initialize wordt aangeroepen.
- Deze werkt tot aan de for loop.

Ik heb het idee dat de for loop niet aangeroepen wordt.
Daarnaast vermoed ik dat de positions array niet gevuld is.
Met window.alert(positions.length) krijg ik geen box en dit gebeurd ook wanneer ik window.alert(0) probeer aan te roepen.

Dat is niet hoe je JavaScript moet debuggen, gebruik een debugger!

[tj.jackel]

Het werkt! Bedankt voor de tips. Ik heb het opgelost met een json functie in combinatie met de gegeven code.
http://www.dyn-web.com/tu.../json/multidim-arrays.php

code:

<script type="text/javascript">

var myCenter=new google.maps.LatLng(0,0);
var positions = <?php echo json_encode( $rows ) ?>;


function initialize()
{

var mapProp = {
  center:myCenter,
  zoom:4,
  mapTypeId:google. maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);



//if(latitude != 0 || longitude !=0){
for(var i = 0; i < positions.length; i++)
        {
        
            var lat = positions[i].latitude;
            var lon = positions[i].longitude;
            var name = positions[i].Name;
            window.alert(lat);

            var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lon) });
            marker.setMap(map);

            var infoWindow = new google.maps.InfoWindow({ content: name });
            infoWindow.open(map, marker);
        }
//}

}



google.maps.event.addDomListener(window, 'load', initialize);
</script>

[ Voor 73% gewijzigd door tj.jackel op 03-07-2016 20:05 ]

[Ventieldopje]

Nu nog de PHP van de HTML/Javascript scheiden en netjes de data die je nodig hebt ophalen met een AJAX request én je code wat opschonen en dan is het helemaal top

[Firefly III]

-

[ Voor 100% gewijzigd door Firefly III op 21-10-2019 09:25 . Reden: Leeg ivm privacy ]

[GlowMouse]

Ventieldopje schreef op zondag 03 juli 2016 @ 20:23:
en netjes de data die je nodig hebt ophalen met een AJAX request

Daar is niet echt een reden voor en dat maakt het nodeloos complex.

[Ventieldopje]

GlowMouse schreef op zondag 03 juli 2016 @ 20:39:
[...]


Daar is niet echt een reden voor en dat maakt het nodeloos complex.

Complex? Dat valt heus wel mee. Het klinkt moeilijker dan dat het is. Maar goed, misschien ben ik iets te streng en gaat dat wat offtopic

[tj.jackel]

@JCE haha die tijd is geweest. Programmeer af en toe wat aan me website.