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

Push Notification to the browser with Javascript

Push notification to the browser is a way to send an information message to the browser same like you experiencing in mobile Apps like Facebook or Whatsapp.

You can do so using a simple jQuery and Javascript code, Today we will only cover the Javscript part in this tutorial.

Try Demo

Ask User for notification permission

First of all we need to request for the permission to user to allow browser notification.

notification-permission

 

Initialize the notification object

If user have granted for notification, we need to initialize the notification object where we need to pass few parameters