We can implement two types of mpas, one google maps and second one is yahoo maps.
one first one is google maps- we have to sign up for API key, with that API key we can place the maps.

The Google Maps API lets you embed Google Maps in your own web pages with JavaScript. The API provides a number of utilities for manipulating maps (just like on the http://maps.google.com web page) and adding content to the map through a variety of services, allowing you to create robust maps applications on your website.

We can signup for our website url at :

http://code.google.com/apis/maps/signup.html

In that fill the text box My web site URL: http://[Domain Name] . . . It will generate the one API Key.

with that API Key we can embed the google map to our website.

We can simple javascript to embed the maps to our website:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>GSmapSearchControl Sample</title>
<!– Note:
Make sure to replace the &key=internal with &key=~the value of your key~
in both the maps API script load and in the Ajax Search API script load statements
–>
<!– maps api, ajax search api, map search control code –>
<script    src="http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAAGvs30FUboNhX-BMsz1wHmhRueXhM_ZR0uaVb2boWRzq1eE2kghQvVdJiR71BuD29Jsee_kDbmydTOQ"

type="text/javascript">
</script>
<script   src="http://www.google.com/uds/api?file=uds.js&    v=1.0&key=ABQIAAAAGvs30FUboNhX-BMsz1wHmhRueXhM_ZR0uaVb2boWRzq1eE2kghQvVdJiR71BuD29Jsee_kDbmydTOQ"
type="text/javascript">
</script>
<script src="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js"
type="text/javascript">
</script>
<!– ajax search stylesheet, map search stylesheet –>
<link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet"    type="text/css"/>
<link href="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.css" rel="stylesheet"/>
<style>
body, table, p{
background-color: white;
font-family: Arial, sans-serif;
font-size: 13px;
}
#mapsearch {
width : 400px;
margin-left: 10px;
padding: 4px;
border : 1px solid #f9f9f9;
}
</style>
<script>
function LoadMapSearch() {
var options = {
title : "Googleplex",
url : "http://www.google.com/corporate/index.html"
}
new GSmapSearchControl(
document.getElementById("mapsearch"),
"1600 Amphitheatre Parkway, Mountain View, CA",
options
);
}
GSearch.setOnLoadCallback(LoadMapSearch);
</script>
</head>
<body>
<div id="mapsearch">Loading…</div>
</body>
</html>

With the above code we can implement the maps to our website.

Thank you,

Anil Kumar

Categories: PHP Code

7 Comments

Cheap Rap Beats · July 3, 2013 at 6:58 pm

Oh yeaaah…I’m not really into PHP but this helps me a lot! Thank YOU!

Why You Should CSS Instead of Tables When Designing Your Web Page | Web Design and all stuff related to it! · September 8, 2009 at 7:08 pm

[…] Google maps using php code « ANIL KUMAR PANIGRAHI 's Blog […]

Using Perl and Regular Expressions to Process Html Files – Part 2 | Web Design and all stuff related to it! · September 10, 2009 at 2:02 pm

[…] Google maps using php code « ANIL KUMAR PANIGRAHI 's Blog […]

Flash Video to HTML Software © – Add Videos to Any Webpage Now! | Web Design and all stuff related to it! · September 17, 2009 at 4:14 pm

[…] Google maps using php code « ANIL KUMAR PANIGRAHI 's Blog […]

Using Perl and Regular Expressions to Process Html Files – Part 1 | Web Design and all stuff related to it! · October 3, 2009 at 2:29 am

[…] Google maps using php code « ANIL KUMAR PANIGRAHI 's Blog […]

How to HTML Video Software © – Convert Videos to Web Format Now! | Web Design and all stuff related to it! · October 4, 2009 at 8:43 pm

[…] Google maps using php code « ANIL KUMAR PANIGRAHI 's Blog […]

HTML to Add Video to Website Encoder © – Adding Videos Easily! | Web Design and all stuff related to it! · October 6, 2009 at 12:21 pm

[…] Google maps using php code « ANIL KUMAR PANIGRAHI 's Blog Video October 6th 2009 […]

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *