0

I want to show Multiple Map Pointers on a Map coming from Custom post type. I can able to get single Map pointer. How can I get Multiple Map Pointers on the map? Here is my code.

<style>
            #map_wrapper {
                height: 400px;
            }

            #map_canvas {
                width: 100%;
                height: 100%;
            }
        </style>
        <?php
        $location = get_field('google_map_lat_long');
        if (!empty($location)):
            ?>
            <?php /* ?>
              <div class="acf-map">
              <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
              </div>
              <?php */ ?>
            <!-- End Content -->

            <script>
                jQuery(function ($) {
                    // Asynchronously Load the map API 
                    var script = document.createElement('script');
                    script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&sensor=false&callback=initialize";
                    document.body.appendChild(script);
                });

                function initialize() {
                    var map;
                    var bounds = new google.maps.LatLngBounds();
                    var mapOptions = {
                        mapTypeId: 'roadmap'
                    };

                    // Display a map on the page
                    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                    map.setTilt(45);

                    // Multiple Markers''
                    // $info='';
                    var markers = [
    <?php
    echo '["' . $location['address'] . '",' . $location['lat'] . ',' . $location['lng'] . '],';
    ?>
                    ];



                    // Info Window Content
                    var infoWindowContent = [['<div class="info_content"><h3><?php echo $location['address']; ?></h3><p><?php echo $location['address']; ?></p></div>']];


                    // Display multiple markers on a map
                    var infoWindow = new google.maps.InfoWindow(), marker, i;

                    // Loop through our array of markers & place each one on the map  
                    for (i = 0; i < markers.length; i++) {
                        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                        bounds.extend(position);
                        marker = new google.maps.Marker({
                            position: position,
                            map: map,
                            title: markers[i][0]
                        });

                        // Allow each marker to have an info window    
                        google.maps.event.addListener(marker, 'click', (function (marker, i) {
                            return function () {
                                infoWindow.setContent(infoWindowContent[i][0]);
                                infoWindow.open(map, marker);
                            }
                        })(marker, i));

                        // Automatically center the map fitting all markers on the screen
                        map.fitBounds(bounds);
                    }

                    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
                    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
                        this.setZoom(14);
                        google.maps.event.removeListener(boundsListener);
                    });

                }
            </script>

            <?php
        endif;
        ?>    


    <?php endwhile; ?>
    <div id="map_wrapper">
        <div id="map_canvas" class="mapping"></div>
    </div>

Thanks, :)

1 Answer 1

1

Not sure why you are having problems adding multiple markers to a map but you might be able to work out what to do from this example.

<!doctype html>
<html>
    <head>
        <title>Google maps - multiple markers example</title>

        <script type='text/javascript'>
            /* data, derived from a db call and written as a json object */
            var json={
                "results":{
                    "0":{"name":"Kinnettles","lat":"56.61543329027024","lng":"-2.9266123065796137"},
                    "1":{"name":"Nathro","lat":"56.793249595719956","lng":"-2.8623101711273193"},
                    "2":{"name":"Ark Hill","lat":"56.57065514278748","lng":"-3.0511732892761074"},
                    "3":{"name":"Dodd Hill","lat":"56.54251020079966","lng":"-2.9051538305053555"},
                    "4":{"name":"Govals","lat":"56.582320876071854","lng":"-2.9509015874633633"},
                    "5":{"name":"Carsegownie","lat":"56.67951330362271","lng":"-2.8062983350524746"},
                    "6":{"name":"Frawney","lat":"56.56806620951482","lng":"-2.9501720266113125"},
                    "7":{"name":"North Tarbrax","lat":"56.57144715546598","lng":"-2.92476614282225"},
                    "8":{"name":"The Carrach","lat":"56.6938437674986","lng":"-3.131382067657455"},
                    "9":{"name":"Glaxo","lat":"56.70431711148748","lng":"-2.4660869436035"}
                }
            };

            /* callback function */
            function initialise(){

                var bounds = new google.maps.LatLngBounds();
                var infoWindow = new google.maps.InfoWindow();

                var map = new google.maps.Map( document.getElementById('map'), {
                    zoom:10,
                    center: { lat: 56.6154, lng: -2.9266 }
                });

                /* process json data and add a marker for each location */
                var data=json.results;
                for( var o in data ){

                    var latlng=new google.maps.LatLng( data[o].lat, data[o].lng );
                    var title=data[o].name;

                    var marker = new google.maps.Marker({
                      position: latlng,
                      map: map,
                      title: title,
                      content:title
                    });

                    google.maps.event.addListener(marker, 'click', function(event){
                        infoWindow.setContent( this.content );
                        infoWindow.open(map, this);
                    }.bind(marker));

                    bounds.extend( latlng );
                }
                map.fitBounds(bounds);
            }
        </script>
        <script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&callback=initialise' type='text/javascript'></script>
        <style type='text/css'>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #map{
                display:block;
                box-sizing:border-box;
                width:800px;
                height:600px;
                margin:1rem auto;
                float:none;
                border:3px solid black;
            }
        </style>
    </head>
    <body>
        <div id='map'></div>
    </body>
</html>
3
  • I am newbee, I am thinking of, If I can get 1 Map pointer from that script, I can get multiple pointers also. Just may be a small code modification required other than changing entire code and strucutre
    – Dreamerz
    Jul 23, 2016 at 12:48
  • Without seeing the actual data that you have for the markers it is hard to be precise but it looks like you have an array with only one item - I just posted the above to give guidance rather than as the way you should do it or as the answer to all your woes.. Jul 23, 2016 at 12:51
  • Thank You very much, that helped
    – Dreamerz
    Jul 25, 2016 at 4:38

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.