How to add Markers on Google Map

There are a few setups to achieve a google map on WordPress site that have multiple markers on the map using latitude and longitude. So let’s start step by step.

Add a script in functions.php 

wp_enqueue_script( ‘dandd_google_map’, ‘https://maps.googleapis.com/maps/api/js?[google_map_api_key]’, array(‘jquery’), ”, false );
Add an HTML code where you want to populate a map
<div id=”googleMapCanvas”></div>
Add this piece of code in functions.php and get data from the post or any custom post type according to the requirements. This function returns me JSON data.
function get_ajax_zip_locations(){
    $zipCode = isset( $_GET[‘zipCode’] ) ? $_GET[‘zipCode’] : ”;
    $locations = array();
    $args = array(
        ‘post_type’         => ‘stores’,
        ‘order’             => ‘DESC’,
    );
    if( $zipCode ) {
        $args[‘meta_key’]       = ‘zip_code’;
        $args[‘meta_value’]     = $zipCode;
        $args[‘posts_per_page’] = 3;
    }
    else {
        $args[‘posts_per_page’] = -1;
    }
    $the_query = new WP_Query( $args );
    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ) : $the_query->the_post();
            $locations[] = array(
                ‘title’             => get_the_title(),
                ‘phn’               => get_field(‘phone_number’),
                ‘store_link’        => get_the_permalink(),
                ‘LatitudeLongitude’ => get_field(‘google_map’)[‘lat’] . “, ” . get_field(‘google_map’)[‘lng’],
                ‘Address’           => get_field(‘google_map’)[‘address’]
            );
        endwhile;
    endif;
    wp_reset_query();
    echo json_encode($locations);
    die;
}
add_action(‘wp_ajax_get_ajax_zip_locations’, ‘get_ajax_zip_locations’);
add_action(‘wp_ajax_nopriv_get_ajax_zip_locations’, ‘get_ajax_zip_locations’);
Add a script in the JS file that grabs data from the functions.php function on page load
jQuery(document).ready(function() {
        if (window.location.href.indexOf(“storeCode”) === -1) {
            jQuery.ajax({
                type: “GET”,
                dataType: “json”,
                url: ajaxURL,
                data: {
                    action: ‘get_ajax_zip_locations’,
                },
                beforeSend : function ( xhr ) {
                },
                success: function( response ){
                    // console.log(response);
                    display_google_map(response);
                },
                complete : function ( xhr ) {
                }
            });
        }
    });
   var map;
    var geocoder;
    var marker;
    var latlng;
    var infowindow;
    var bounds;
    let latitude  = 60.7922;
    let longitude = -161.7558;
    function display_google_map( data ) {
        bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            center: new google.maps.LatLng(latitude, longitude),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById(“googleMapCanvas”), mapOptions);
        console.log(“data: ” , data);

        // DATA FORMAT

        // var content = ‘[{ “ADDRESS”: “Jamiya Nagar Kovaipudur Coimbatore-641042”, “LatitudeLongitude”: “10.9435131,76.9383790”, “MarkerId”: “Customer” },{ “ADDRESS”: “Coimbatore-641042”, “LatitudeLongitude”: “11.0168445,76.9558321”, “MarkerId”: “Customer”}]’;
        if( data.length > 0 ) {
            for (var i = 0; i < data.length; i++) {
                setMarker(data[i]);
            }
        }
        /* Set zoom level */
        var boundsListener = google.maps.event.addListener((map), ‘bounds_changed’, function(event) {
            this.setZoom(5);
            google.maps.event.removeListener(boundsListener);
        });
    }
    function setMarker(item) {
        geocoder = new google.maps.Geocoder();
        infowindow = new google.maps.InfoWindow({ maxWidth: 250 });
        if ((item[“LatitudeLongitude”] == null) || (item[“LatitudeLongitude”] == ‘null’) || (item[“LatitudeLongitude”] == ”)) {
            geocoder.geocode({ ‘address’: item[“Address”] }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                    bounds.extend(latlng);
                    marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        draggable: false,
                        html: item[“Address”],
                        // icon: “images/marker/” + item[“MarkerId”] + “.png”
                    });
                    marker.setPosition(latlng);
                    map.setCenter(latlng);
                    google.maps.event.addListener(marker, ‘click’, function(event) {
                        infowindow.setContent(this.html);
                        infowindow.setPosition(event.latLng);
                        infowindow.open(map, this);
                    });
                    map.fitBounds(bounds);
                }
                else {
                    alert(item[“Address”] + “. This address couldn’t be found”);
                }
            });
        }
        else {
            var latlngStr = item[“LatitudeLongitude”].split(“,”);
            var lat = parseFloat(latlngStr[0]);
            var lng = parseFloat(latlngStr[1]);
            latlng = new google.maps.LatLng(lat, lng);
            bounds.extend(latlng);
            const contentString = `<div id=”content”>
                                        <h1 id=”diaHeading” class=”diaTitle”>${item.title}</h1>
                                        <div id=”bodyContent”>
                                            <address>${item.Address}</address>
                                            <p class=”diaPhone”>Phone: ${item.phn}</p>
                                        </div>
                                    </div>`;
            marker = new google.maps.Marker({
                position: latlng,
                map: map,
                draggable: false,
                //icon: “images/marker.png”,       // Give ur own image
                content: contentString
            });
            marker.setPosition(latlng);
            map.setCenter(latlng);
            google.maps.event.addListener(marker, ‘click’, function(event) {
                infowindow.setContent(this.content);
                infowindow.setPosition(event.latLng);
                infowindow.open(map, this);
            });
            map.fitBounds(bounds);
        }
    }

Leave a Reply

Your email address will not be published.