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.

20 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

  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.

  3. Jose

    I David.

    I would like to implement your map for a home service.
    I have downloaded it and added some locations, but the map does not appear.
    I know now if mandatory to have a API KEY, I have one but don’t know how to use it here.

    I have checked your f(x) Maps plugin, but don’t know how to implement the maps itself.

    Can you point me on the right way?

    Many thanks!

  4. Kirt Alburo

    I have downloaded your sample code, but i cant find where to replace api key for google maps..Can i ask where to find it.

    Thank You for the sample and fro future response…
    Hoping for your answer…

    • David

      Sorry Kirt, the key can be added when you load the script via URL for the google maps JS.
      Something like this:

      (this tutorial was long time ago when api key is not required)

  5. Sarrah

    Thank you its great help for me. I was confused and keep on finding how to do it.

Comments are closed.