CODEWITHSUNDEEP
wordpressgoogle-maps
avd
avd

Reputation: 39

Google maps wont display in front end

I made a plugin using google maps that works perfectly fine in the admin section of my wordpress site.

When I made the shortcode to display the plugin on the front end of my site, the map is not working/loading/running nothing. My scripts are working fine, I have no console commands and my initmap map markers are being generated(I checked both source code and inspect element on chrome). But my map simply wont display.

Any help as to why this is not working on the front end of wordpress would be greatly appreciated. (again- code works fine in admin settings but when using shortcode to display on the front end, the map is not displaying)

<html>
                        <head>
                            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
                            <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
                            <title>Specialist information</title>
                            <script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
                            <script type="text/javascript">
                                //<![CDATA[
                                console.log("Start Script");
                                geocoder = new google.maps.Geocoder();
                                geocode="false";
                                //function for retrieving coordinates
                                function getCoordinates (address, callback){
                                    var coordinates;
                                    geocoder.geocode({address:address}, function (results, status){
                                        coords_obj= results[0].geometry.location;
                                        coordinates = [coords_obj.k,coords_obj.D];
                                        callback(coordinates);
                                    })
                                }


                                var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
                                    new google.maps.Size(32, 32), new google.maps.Point(0, 0),
                                    new google.maps.Point(16, 32));
                                var center = null;
                                var map = null;
                                var currentPopup;
                                var bounds = new google.maps.LatLngBounds();
                                function addMarker(lat, lng, info) {
                                    var pt = new google.maps.LatLng(lat, lng);
                                    bounds.extend(pt);
                                    var marker = new google.maps.Marker({
                                        position: pt,
                                        icon: icon,
                                        map: map
                                    });
                                    var popup = new google.maps.InfoWindow({
                                        content: info,
                                        maxWidth: 500

                                    });
                                    google.maps.event.addListener(marker, "click", function() {
                                        if (currentPopup != null) {
                                            currentPopup.close();
                                            currentPopup = null;
                                        }
                                        popup.open(map, marker);
                                        currentPopup = popup;
                                    });
                                    google.maps.event.addListener(popup, "closeclick", function() {
                                        map.panTo(center);
                                        currentPopup = null;
                                    });
                                }
                                function initMap() {
                                    //retrives coordinates from address - not the best practice but it works for now
                                    getCoordinates('<?php echo $paddress ?>', function(coords){

                                        // centers map based on coordinates of the address
                                        map = new google.maps.Map(document.getElementById("map"), {
                                            center: new google.maps.LatLng(coords[0], coords[1]),
                                            zoom: 9,
                                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                                            mapTypeControl: false,
                                            mapTypeControlOptions: {
                                                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                                            },
                                            navigationControl: true,
                                            navigationControlOptions: {
                                                style: google.maps.NavigationControlStyle.SMALL
                                            }
                                        });
                                        // paitents Address marker
                                        var pmarker = new google.maps.Marker({position:new google.maps.LatLng(coords[0], coords[1]), title:"Paitents Address!"});
                                        pmarker.setMap(map);
                                        // adds markers on map from database based on specialist and insurance by lat and long
                                        <?php
                                        $query = "SELECT * FROM $specialist WHERE $insurance=1 AND is_active=1";
                                        $result = mysql_query($query);
                                        while ($row = @mysql_fetch_assoc($result)){
                                        $name=$row['provider'];
                                        $lat=$row['lat'];
                                        $lon=$row['lon'];
                                        $address=$row['address'];
                                        $phone = $row['phone'];
                                        $fax = $row['fax'];
                                        echo ("addMarker($lat, $lon,'<p><b>$name</b><br/>$address<br/>Phone:$phone<br/>Fax:$fax<br/></p>');\n");
                                        }
                                        ?>
                                        center = bounds.getCenter();

                                    })
                                }
                                //]]>
                                console.log("End Script");
                            </script>
                        </head>
                        <body onload="initMap()">
                        <div id="map"></div>

Upvotes: 0

Views: 994

Answers (2)

avd
avd

Reputation: 39

It turns out that I needed to set a height and width property for my div in order for it to show up on the front end of word press.

This brings me to my next question, Why does the map automatically fill the height/width properties in the back-end admin side of word press but not for the front end side for users?

Upvotes: 0

bjiang
bjiang

Reputation: 6078

Please trying to put following code in your HTML:

<div id="mapDiv">   
    </div>

And code for your javascript, need JQuery library to append:

var googleMap = '<div id="map"></div>';

// Calls the initializeMap() function when the page loads
window.addEventListener('load', initializeMap);

// Vanilla JS way to listen for resizing of the window
// and adjust map bounds
window.addEventListener('resize', function(e) {
  // Make sure the map bounds get updated on page resize
  map.fitBounds(mapBounds);
});

// show Map
$("#mapDiv").append(googleMap);

For above, I can successfully get the Google map show on front.

Upvotes: 0

Related Questions