wordpress with google map API doesn't work

Question

i am using PHP and MYSQL on WordPress with Google Map API where i am retrieving data from the MYSQL database and display markers on the Google Map based on the coordinates retrieved from the database.

the problem is that noting is displayed in the web page, can anyone tell me where is the error in my code?

code:

<?php
        /*
        Template Name: MAP2
        */

        get_header();
  ?>


<!DOCTYPE html>
<html>
  <head>
    <title>Custom Markers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
     <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

  </head>
  <body>
    <div id="map"></div>
    <script>

     var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: new google.maps.LatLng(-33.91722, 151.23064),
          mapTypeId: 'roadmap'
        });

        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var icons = {
          parking: {
            icon: iconBase + 'parking_lot_maps.png'
          },
          library: {
            icon: iconBase + 'library_maps.png'
          },
          info: {
            icon: iconBase + 'info-i_maps.png'
          }
        };

        function addMarker(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
          });
        }

        var features = 
          {
            <?php
            global $wpdb;
              $prependStr ="";
              foreach( $wpdb->get_results("SELECT * FROM site_coordinates2") as $key => $row) 
              {
                  $latitude = $row->latitude;
                  $longitude = $row->longitude;
                  $info = $row->siteID;
             echo $prependStr;
           ?>
    {

    position: new google.maps.LatLng(<?php echo $latitude ?>, <?php echo $latitude ?>),
    type: '<?php echo $info;?>'
   }
   <?php
   $prependStr =",";
   }


  ?>
}
    </script>

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=***************callback=initMap">
    </script>
  </body>
</html>

<?php
get_footer();
?>

score 0 · Answer 1 · edited May 23 '17 at 12:25

0

I think the problem from setting the height. See Here

But in my cases, set the specific pixel to map div. Like this #map {min-height: 600px;}

edited May 23 '17 at 12:25

Community

1
1

answered Mar 03 '17 at 07:48

sayingu

2,261
3
19
26

i did change the height to 300px but still nothing is shown – Jenny 3akra Mar 03 '17 at 07:55
I tested your codes but it's okay to show maps. Did you ever use "&" after "auth key"? – sayingu Mar 03 '17 at 08:35
Add "&" to just before "callback"? – sayingu Mar 03 '17 at 10:48
that is what i did src="https://maps.googleapis.com/maps/api/js?key=********&callback=initMap"> – Jenny 3akra Mar 03 '17 at 10:56
I think your "php" code has some error. Try remove "php" codes and run app. – sayingu Mar 03 '17 at 10:58
Can you open a chrome dev tools and any console messages? – sayingu Mar 03 '17 at 11:09
i did not understand your question – Jenny 3akra Mar 03 '17 at 11:10
If you use chrome browser then press "F12" and reload the page and see console tab. If page has any error messages are shown – sayingu Mar 03 '17 at 11:12
i tried your answer and it displays 2 errors : Uncaught SyntaxError: Unexpected end of input ********************* Uncaught Xc message: "initMap is not a function" name: "InvalidValueError – Jenny 3akra Mar 03 '17 at 11:21
At the right of syntax error message show, clickable line number show. Click it and check javascript syntax error. – sayingu Mar 03 '17 at 11:46
ichanged the place of the script that includes the google map API and API key. now it displays these errors: (index):140 Uncaught SyntaxError: Unexpected end of input. Uncaught Xc {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Xc (https://maps.googleapis.com/m…*********&callback=initMap:137:73"} – Jenny 3akra Mar 03 '17 at 13:21
it was a missing brakets .... now it display the map but o think i have a problem in the php because when i uncomment it the map doesn't work – Jenny 3akra Mar 03 '17 at 13:28
That's nice display the map. To find the php code problems, browser's view page source (mouse right-click on page) then check your php code compiled. – sayingu Mar 03 '17 at 14:45

wordpress with google map API doesn't work

code:

1 Answers1