current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote -2 down vote favorite

I am having difficulties adding multiple markers to my Google Map. Below is my code:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { height: 100% }
        </style>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
        function initialize() {
            var mapOptions = {
                zoom: 10,
                center: new google.maps.LatLng(-35.3075,149.1244)
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
        <?php
            $dbc = mysql_connect('localhost', 'username', 'password') or die('Unable to connect to MySQL: '.mysql_error()); 
            mysql_select_db ('database', $dbc) or die('Unable to connect to database: '.mysql_error());  
            $query = "SELECT * FROM centenary_events WHERE location != ''";
            $result = mysql_query($query) or die("Error querying database: ".mysql_error());
            while ($row = mysql_fetch_array($result)) {
                ?>
                <script>
                    var link = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20geo.placefinder%20where%20text%3D"<?php echo $row['location']?>"&format=json&diagnostics=true';
                    $.getJSON(link, function(json) {
                        console.log("<?php echo $row['title']?>");
                        console.log("Latitude: " + json.query.results.Result.latitude);
                        console.log("Longitude: " + json.query.results.Result.longitude);
                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng(Number(json.query.results.Result.latitude), Number(json.query.results.Result.longitude)),
                            map: map,
                            title: 'Hello World!'
                        });
                    });
                </script>
                <?php
            }
        ?>
    </head>
    <body>
        <div id="map-canvas" style="width: 100%; height: 100%"></div>
    </body>
</html>

Using PHP and MySQL, I am attempting to loop through a database to gather values, and then use those values to add markers to a map. The map is working, but the marker functionality is not. Please help.

share|improve this question
    
article in the documentation: Using PHP/MySQL with Google Maps (uses AJAX to load markers in XML, but can be modified to be JSON instead) –  geocodezip Jul 3 at 3:29
    
follow my answer in this: stackoverflow.com/questions/23915353/… –  HoangHieu Jul 8 at 11:43

1 Answer 1

up vote 0 down vote

You're not doing it in the way you need to :), So to add multiple marker or what ever into map from php, the best way would be while proccesing the php fetch those data you wanna display and send them to javascript (json,xml or whatever js can parse) or playing with ajax (which is one level higher the this solution), in your case should be like the follow:

HTML&PHP

<?php
 $dbc = mysql_connect('localhost', 'username', 'password') or die('Unable to connect to MySQL: '.mysql_error()); 
 mysql_select_db ('database', $dbc) or die('Unable to connect to database: '.mysql_error());  
 $query = mysql_query("SELECT * FROM centenary_events WHERE location != ''");
 $myData = array();
 while($row = mysql_fetch_array($result)){
    $myData = $row;
 }
?>
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map-canvas { height: 100% }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
    //here is the magic :) 
    var myData = <?php echo json_encode($myData) ?>;
    function initialize() {
        var mapOptions = {
            zoom: 10,
            center: new google.maps.LatLng(-35.3075,149.1244)
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        //and you must set this code here because the map is just initialed
        $.each(myData, function(){
            var link = 'generate your link here with myData array';
            $.getJSON(link, function(json) {
                   var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(Number(json.query.results.Result.latitude), Number(json.query.results.Result.longitude)),
                        map: map,
                        title: 'Hello World!'
                    });
                });
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
...

The code may have errors, I just wanted to create you an idea how it should look

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.