Google Map is the widely used element in contact form for a website and you can easily show Google Map to your website.In this post you will learn how to show a simple Google map with a marker in a PHP web page. Google map can be implemented by using simple HTML tags and JavaScript functions. for showing map in php web page firstly you have to create html page which will be used for showing map. After that you have to write JavaScript functions for displaying map with a marker.
Below is the map you’ll create using this post’s code.
Steps for Adding Google Map in PHP web page.
1. Firstly you have to create an HTML page.In this code you can see two div tags. One is for Contact us form and other one will display google map. the div tag with id “map” will be used in JavaScript code for showing google map.if you dont need form then use only second div in your HTML code.
HTML code
<div class = “formdiv”>
<form action=“” method=“post” class=“formcls” novalidate=“novalidate”>
<p><label> Your Name (required)<br/>
<input name=“your-name” value=“” type=“text”> </label></p>
<p><label> Your Email (required)<br/>
<input name=“your-email” value=“” type=“email”> </label></p>
<p><label> Subject<br/>
<input name=“your-subject” value=“” type=“text”> </label></p>
<p><label> Your Message<br/>
<textarea name=“your-message” cols=“20” rows=“5” ></textarea> </label></p>
<p><input id=“submitbutton” value=“Send” type=“submit”></p>
<address> Address: Sukhna Lake, Sector 1, Chandigarh</address>
</div>
<div id=“map”></div>
2. In this section we are using JavaScript function to initialize google map. In this section we are using constructors like new google.maps.Map() for adding map and new google.maps.Marker() for adding marker. These constructor functions have properties like zoom,center and position.
JavaScript code
function initMap() {
var demomap = {lat: 30.7421379, lng: 76.8187557};
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 19,
center: demomap
});
var marker = new google.maps.Marker({
position: demomap,
map: map
});
}
</script>
3. Adding Google map to div.This section shows you how to load the Google Maps JavaScript API into your web page, and how to write your own JavaScript that uses the API to add a map with a marker on it.you can get your own API key from google.
JavaScript code
src=“https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”>
</script>
Usage for this codeā¦
function initMap() {
var demomap = {lat: 30.7421379, lng: 76.8187557};
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 19,
center: demomap
});
}
a. initMap(): This function initializes and adds the map when the web page loads. Use a script tag to include your own JavaScript which contains the initMap function.
b. getElementById(): This function is used to get id of HTML element which will be used for displaying google map.
c. new google.maps.Map(): This function creates a new Google maps object. It contains zoom and center properties. This function adds google map in the page.
d. zoom: The zoom property specifies the zoom level for the map. Zoom:0 will display earth.
e. center: The center property tells the API where to center the map. latitute and longitute are used in center property.
position: demomap,
map: map
});
f. new google.maps.Marker(): This function is used to add marker to a particuler position on map.
g. position: The position property sets the position of the marker. This property uses latitute and longitute.
src=“https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”>
</script>
h. script src: This script loads the API from the specified URL.
i. async: This async attribute allows the browser to continue rendering the rest of page while the API loads.
j. defer: The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed.
k. key: The key parameter contains your API key.
Download Code
Leave a comment