How to Display Multiple Location in One Google Map

Multiple Marker One Google Map

This is how I Display Multiple Marker Location in One Google Map. The trick is how to make all marker visible (make the map range/area to fit all marker) using maps “bound“.

Note: Google Maps change their term, all new domain now require API key. If anyone need example code in how to implement API key, please check my plugin f(x) Maps.

Map Data

Well, In collecting the data i use ACF Pro v.5 with Google Map Field in Repeater Field. But you don’t have to use the same tool. The important thing is to understand the method. So I’ll explain the data needed instead.

In each marker (map location) we need:

  • LAT: Map Latitude
  • LNG: Map Longitude

Both numeric value of map position.

the example data:
in this example only 3 locations.

$locations = array();

/* Marker #1 */
$locations[] = array(
    'google_map' => array(
        'lat' => '-6.976622',
        'lng' => '110.39068959999997',
    ),
    'location_address' => 'Puri Anjasmoro B1/22 Semarang',
    'location_name'    => 'Loc A',
);

/* Marker #2 */
$locations[] = array(
    'google_map' => array(
        'lat' => '-6.974426',
        'lng' => '110.38498099999993',
    ),
    'location_address' => 'Puri Anjasmoro P5/20 Semarang',
    'location_name'    => 'Loc B',
);

/* Marker #3 */
$locations[] = array(
    'google_map' => array(
        'lat' => '-7.002475',
        'lng' => '110.30163800000003',
    ),
    'location_address' => 'Ngaliyan Semarang',
    'location_name'    => 'Loc C',
);

Google Map Script

This is the scripts we need:

Display The Map

1) First, create an empty DIV to display the Map.

<div id="google-map" class="google-map">
</div><!-- #google-map -->

2) Crate the map using GMaps.js

jQuery( document ).ready( function($) {

    /* Create Map. */
    var map = new GMaps({
        el: '#google-map',
        lat: '',
        lng: '',
        scrollwheel: false
    });

    /* Create Marker Here... */
});

In the map we don’t need to specify the “lat” and “lng” data, because we are going to add them dynamically based on locations.

3) Add each location marker:

<?php /* For Each Location Create a Marker. */
foreach( $locations as $location ){
    $name = $location['location_name'];
    $addr = $location['location_address'];
    $map_lat = $location['google_map']['lat'];
    $map_lng = $location['google_map']['lng'];
    ?>
    /* Add Marker */
    map.addMarker({
        lat: <?php echo $map_lat; ?>,
        lng: <?php echo $map_lng; ?>,
        title: '<?php echo $name; ?>',
        infoWindow: {
            content: '<p><?php echo $name; ?></p>'
        }
    });
<?php } //end foreach locations ?>

4) Get “Bound” Position of the Map using “fitLatLngBounds” feature to center the map.

and the full code would be:

jQuery( document ).ready( function($) {

    var map = new GMaps({
        el: '#google-map',
        lat: '<?php echo $map_area_lat; ?>',
        lng: '<?php echo $map_area_lng; ?>',
        scrollwheel: false
    });

    /* Map Bound */
    var bounds = [];

    <?php /* For Each Location Create a Marker. */
    foreach( $locations as $location ){
        $name = $location['location_name'];
        $addr = $location['location_address'];
        $map_lat = $location['google_map']['lat'];
        $map_lng = $location['google_map']['lng'];
        ?>
        /* Set Bound Marker */
        var latlng = new google.maps.LatLng(<?php echo $map_lat; ?>, <?php echo $map_lng; ?>);
        bounds.push(latlng);
        /* Add Marker */
        map.addMarker({
            lat: <?php echo $map_lat; ?>,
            lng: <?php echo $map_lng; ?>,
            title: '<?php echo $name; ?>',
            infoWindow: {
                content: '<p><?php echo $name; ?></p>'
            }
        });
    <?php } //end foreach locations ?>

    /* Fit All Marker to map */
    map.fitLatLngBounds(bounds);
});

and that’s it.

How to Display Google Map Link with Marker.

It’s very simple, here’s the pattern:

http://www.google.com/maps/place/{lat},{lng}

I also include a simple example to display each google map location link in the demo.

13 Comments

  1. amit kumar

    Hello,
    I have tried your code with my https:// thats mean ssl url , there is not working of your code its working without ssl url so please help us out for that how can i resolve it ?

    Please mail me

    Reply
  2. nabilah

    why my maps cannot appear in local host php?
    they said – Oops! Something went wrong.
    This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *