ItSolutionStuff.com

How to Integrate Google Map using Gmaps JS?

By Hardik Savani • November 5, 2023
jQuery

Today, i am going to show you how to create simple google map in PHP. In this example i use gmaps.js plugin for integrate google map with marker of your location. You can simply generate google map in your any php framework like laravel framework, codeigniter framework, zend framework, cakephp framework etc.

Gmaps.js plugin provide us map events, markers, Geolocation, Geolocation etc. you can use very simply and use your project.

Bellow example you can see i added one marker on my location and also setted title, so you can also see demo and preview after bellow example file.

Preview:

Example:

<!DOCTYPE html>

<html>

<head>

<title>Google map integration in php example</title>

<script src="http://maps.google.com/maps/api/js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js"></script>


<style type="text/css">

#mymap {

border:1px solid red;

width: 800px;

height: 500px;

}

</style>


</head>

<body>


<h1>Google map integration in php example</h1>

<div id="mymap"></div>


<script type="text/javascript">


var mymap = new GMaps({

el: '#mymap',

lat: 21.170240,

lng: 72.831061,

zoom:6

});


mymap.addMarker({

lat: 21.170240,

lng: 72.831061,

title: 'Surat',

click: function(e) {

alert('This is surat, gujarat from India.');

}

});


</script>


</body>

</html>

You can get more information about gmaps.js plugin from here : Gmaps JS.

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Laravel Google Maps Multiple Markers Example

Read Now →

Angular Google Maps Marker Click Event Example

Read Now →

Angular Google Maps Multiple Markers Example

Read Now →

Angular Google Maps Get Current Location

Read Now →

React - Rendering an Array of Data with map()

Read Now →

Google Maps Autocomplete Search Only One Country

Read Now →

Google Maps API Google Map with Draggable Marker Example

Read Now →

Google Maps API - Autocomplete Address Search Box with Map Example

Read Now →

Autocomplete Places Search Box using Google Maps Javascript API

Read Now →

Laravel Multiple Markers in Google Map using Gmaps.js

Read Now →

How to Call AngularJS Controller Function in JQuery?

Read Now →

PHP Crop Image Before Upload using Croppie JS Example

Read Now →

How to Add Multiple Markers in Google Map using JQuery?

Read Now →

How to use Google Maps API with JQuery PHP?

Read Now →