Skip to main content

Google Map with Multiple color Markers PHP – JavaScript/jQuery

In this tutorial We will learn how to display responsive Google Map with multiple color marker, It is also dedicated to one requester who submitted a request throw our Request a Tutorial page for Making Google map area to fit all markers inside map we also cover that point here.

Try Demo

Google Map Api

We will use gmaps JavaScript to display Google map with multiple Latitudes and longitudes data to show our different color marker pins. We will also use Google Map Geocode Api to fetch Lat and lng from location name.

PHP array for Multiple Location

Fetching Lat, Lng and address information from above array with the help of Google Map Geocode API

Creating Map with multi color marker using gmaps

Notice the map.fitLatLngBounds(bounds) method in above code which is responsible to zoom in/out map to fit the all marker inside.

Html container to display Google Map and list Location

Try Demo


With the help of this tutorial you can display responsive multiple color location Marker on Google map and also zoom the map to fit the all marker inside.

Hardik Joshi

Hardik Joshi is Founder, Developer and Writer at, He loves to write usable code for the Web and other digital sources.