0

I'm trying to create a shortcode that lets you embed google map anywhere in wordpress page.

shortcode must be able to pass two attributes ( latitude and longitude )

Below is edited question ( I did not edit whole question as there exists answer for above question )

Adding shortcode wasn't suitable choice in my case as there were be multiple locations ( markers on map ).

So, I need to create a map that would load multiple locations.

This is not only problem, there are three places ( eg, place1, place2, place3 ) and each location contains sub locations. The map should load place1 locations when page loads, when clicked on other place tab ( say place2 ) the map should hide place1 locations and load the locations of place2, and same for place3. And finally there exists a tab to load all the places and theri respective locations.

google.maps.event.addDomListener(window, 'load', init);
        function init() {
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
            var mapOptions = {
                // How zoomed in you want the map to start at (always required)
                zoom: 6,

                // The latitude and longitude to center the map (always required)
                center: new google.maps.LatLng(62.1630198, 12.9895886), // New York

                // How you would like to style the map. 
                // This is where you would paste any style found on Snazzy Maps.
                styles: [{"featureType":"administrative","elementType":"all","stylers":
                [{"saturation":"-100"}]},{"featureType":"administrative.province",
                "elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape",
                "elementType":"all","stylers":[{"saturation":-100},{"lightness":65},
                {"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":
                [{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},
                {"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},
                {"featureType":"road.highway","elementType":"all","stylers":[{"visibility":
                "simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":
                [{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":
                [{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":
                [{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water",
                "elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},
                {"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":
                [{"lightness":-25},{"saturation":-100}]}]
            };

            // Get the HTML DOM element that will contain your map 
            // We are using a div with id="map" seen below in the <body>
            var mapElement = document.getElementById('map');

            // Create the Google Map using our element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);

            // Let's also add a marker while we're at it
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(40.6700, -73.9400),
                map: map,
                title: 'Location One'
            });
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(43.6700, -73.9400),
                map: map,
                title: 'Location Two'
            });
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(46.6700, -73.9400),
                map: map,
                title: 'Location Three'
            });
        }

I'm using ACF to make fields for longitude and latitude values for locations.

Improve this question
1
  • What is the question? What have you tried so far, what issue are you facing?
    – Iceable
    Commented Aug 6, 2018 at 7:08

1 Answer 1

Reset to default
0 
function bartag_func( $atts ) {
$atts = shortcode_atts( array(
    'latitude' => '28.66', // default value
    'longitude' => '99.25' // default value
), $atts, 'bartag' );

return <div class="" latitude=" '.$atts['latitude'].' " longitude=" '.$atts['longitude'].' "></div>'; 
} 

add_shortcode( 'bartag', 'bartag_func' );

Now you can use shortcode like : 

[bartag latitude='12.34' latitude='12.34']

will return :

<div class="" latitude="12.34" longitude="12.34"></div>

https://codex.wordpress.org/Function_Reference/add_shortcode#Examples

Improve this answer
1
  • appreciate your help
    – maverick
    Commented Aug 13, 2018 at 6:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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