Show Marker on Google Map using Latitude and Longitude

Google Map using Latitude and Longitude
This post will help you to understand how to show Marker on Google Map using latitude and longitude in PHP. Google Map is important feature to show direction of address on web page.

You can add Google Map in an application to identify your business location or show address direction on contact us page. This will help users to identify exact address location direction.

To show Google Map using latitude and longitude we are including Google Map API library. This library gives access to use google maps features.

In this example we are using static latitude, longitude and location name value to show on Google Map. Any beginner who have some basic knowledge of JavaScript, HTML and CSS, can easily implement this code in any type of application. Lets start to learn…

Showing Google Map using Latitude and Longitude

First create an PHP or HTML page and include google map api library in it.

Now create an JavaScript code to show Google Map using latitude and longitude. In this initialize an function to load map.

google map

Put latitude and longitude value in google.maps.Map constructor to display map.

To show marker on google map using google.maps.Marker constructor. Must include the Position property. You can animate the marker with the animation property. Add this ‘animation: google.maps.Animation.BOUNCE’ property in marker constructor.

To display location pop up in Google Map using google.maps.InfoWindow() constructor. We put static address location in it. Check below complete JavaScript code:

Google Map has several other types of Overlays. You can use it as per your requirement.

  • Polyline – Series of straight lines on a map
  • Polygon – Series of straight lines on a map, and the shape is “closed”
  • Circle and Rectangle
  • Custom overlays – set any initialization parameters using it

Now we need an HTML area to show Google Map on page.

You May Also Like

Find & Fix Google Structured Data Errors in WordPress
Simple jQuery Barcode Generator Example
Credit Card Number Validation Using jQuery

This is quite simple way to show Marker on Google Map using latitude and longitude. Try it to implement this feature on web page or any other application. Check live demo and download the free source code.

DEMO

2 thoughts on “Show Marker on Google Map using Latitude and Longitude

  1. Hello Harish,

    Coming to Codefixup for the first time, loads of development information here, thanks for sharing your knowledge. And this article is very helpful for creating our own Google marker without using any plugin, thank you for sharing it.

Leave a Comment