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:
- jQuery: make sure you enqueue it.
- Google Map API JS: this is ths script to display map.
- GMaps: simple google maps library.
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.
Help me, how to add an button to find nearest places from device locations ?
Hi,
Thanks for the code and detailed explanation, but I found this code useful and I used this one for my project
http://www.sachinghare.com/google-map-integration-with-multiple-locations-php-mysql/
Regards
Thankx , this is very helpful , save my time
thank for all.
It’s very well coded and documented
hai i need to show the info on mouse hover.. can u help me
Thanks, it is great.
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
actually I don’t know why. but you can send me the details and I’ll take a look https://shellcreeper.com/contact/
Thanks for step by step to display google maps.
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.
just check in console…it would have been showing “MissingKeyMapError”….for solving this error you can refer this video https://www.youtube.com/watch?v=z1hQgVpfTKU.
yup! google change their term, all new domain now require API key.
If anyone need example code, please check my plugin http://genbumedia.com/plugins/fx-maps/
google change their term, all new domain now require API key.
If anyone need example code, please check my plugin http://genbumedia.com/plugins/fx-maps/
how to map maker show different color in map
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!
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…
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)
thank for share about add multiple location on gmb this is great
thanks for share about google map location thank u so much
Thank you its great help for me. I was confused and keep on finding how to do it.