CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Cakkaphong Khangsri
Cakkaphong Khangsri

Reputation: 184

i want to use Map marker from Database

I have a google map and I would like to add a new marker on my database with it latitude and longitude but it's not working and i found some error "Uncaught SyntaxError: missing ) after argument list" pleses tell me. Thank for helping.

<!DOCTYPE html>
<html>
  <head>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
            var mapOptions = {
                center: {lat: 13.847860, lng: 100.604274},
                zoom: 10,
            }
            var map = new google.maps.Map(document.getElementById('map'),mapOptions); 
            var marker, info;
            $.getJSON( "jsondata.php", funtion(jsonObj){
                $.each(jsonObj, function(i, item){
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(item.lat, item.lng),
                        map: maps,
                    });
                    info = new google.maps.Infowindow();
                    google.maps.event.addListener(marker, 'click', (function(marker, i){
                        return function() {
                            info.setContent(item.name);
                            info.open(maps, marker);
                        }
                    })(marker, i));
                });
            });       
        }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6oLvZzDHD-qxeX3g17_uHQMWXFXCxU30&callback=initMap">

    </script>
  </body>
</html>

and my connect file

<?php
header('Content-Type: application/json');
$objConnect = mysqli_connect("localhost","root","root","username-databasename");
$strSQL = "SELECT * FROM markers ";
$objQuery = mysqli_query($objConnect,$strSQL);
$resultArry = arry();
while($obResult = mysql_fetch_assoc($objQuery))
{
    array_push($resultArray,$obResult);
}
echo json_encode($resultArray);
?>

https://i.sstatic.net/CLvCe.png

Upvotes: 1

Views: 95

Answers (2)

ByWaleed
ByWaleed

Reputation: 402

Solution:

<!DOCTYPE html>
<html>
  <head>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
            var mapOptions = {
                center: {lat: 13.847860, lng: 100.604274},
                zoom: 10,
            }
            var map = new google.maps.Map(document.getElementById('map'),mapOptions); 
            var marker, info;

            $.getJSON( "jsondata.php", function( jsonObj ) {
                $.each(jsonObj, function(i, item){
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(item.lat, item.lng),
                        map: maps,
                    });
                    info = new google.maps.Infowindow();
                    google.maps.event.addListener(marker, 'click', (function(marker, i){
                        return function() {
                            info.setContent(item.name);
                            info.open(maps, marker);
                        }
                    })(marker, i));
                });
            }); 

        }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6oLvZzDHD-qxeX3g17_uHQMWXFXCxU30&callback=initMap">

    </script>
  </body>
</html>

Upvotes: 1

ByWaleed
ByWaleed

Reputation: 402

Error on Line 24. It should be like this:

$.getJSON( "jsondata.php", funtion(jsonObj)){

Upvotes: 1

Related Questions