Thursday, February 22, 2018

Google Maps in HTML ASP NET PHP JSP

Google Maps in HTML, ASP.NET, PHP, JSP

The Article will guide you with complete knowledge of how to add a google map in your webpage with knowledge of JAVASCRIPT, Use of Geocoder, Use of InfoWindow, Use of Marker, Tabbed Markers, Maximising marker, Creating context menu, streetview in your map

Introduction

This article will guide you with a bit of knowledge about use of javascript, and more precisely will enable you to use Google Maps to your webpage with ease. Google brought web services that anyone can connect to and use their services without any cost. Well, there is some restriction to the use of gmap. They have two versions of maps, one for standard purpose which will come for free, and another one is Google map Enterprise Solution.

Well Simply if you want to add a google map to your website and which can be seen from anywhere outside, means can be accessible to just using a link, you dont need to pay google for using their API. But if you want to restrict access to maps behind a valid login, then you need to pay google. I am using simple HTML page for adding up gmap. And later on I will use others also to make the gmap look very lively.

The only thing that you need in case of using gmap to your application is an google account. You can sign up for an account for free. Just go here.

You could sign up for an account for free, and then you can use google maps to your website by clicking on "Create an account now". After you create an account just use your userid and password to login when required.

Background

For using Google Maps in your website the thing you need is a bit of knowledge of javascript, means how to call a function from web controls. I will describe everything, but you need to catch up all those.

Sample examples

I am creating an HTML page for implementing this project. You can use any projects to implement maps dynamically using any server side languages.

EXAMPLE 1 : Getting Started


//Use of Gmap in your web page

// 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html  style="border: 0px; font-size: 9pt; margin: 0px; padding: 0px;">="http://www.w3.org/1999/xhtml">


 <head>


 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>


 <title>My Locations</title>


 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;


 key=ABQIAAAAcl" type="text/javascript"></script>


<script type="text/javascript">




function load() 

 if (GBrowserIsCompatible()) {

{


var point;

 var map=new GMap2(document.getElementById("map"));


 map.addControl(new GOverviewMapControl());


 map.enableDoubleClickZoom();

map.enableScrollWheelZoom();

 map.addControl(new GMapTypeControl());


 map.addControl(new GSmallMapControl());


 var address=<img src="myimage.gif" width=150 height=40/><br/> + 


 <font size="2" face="Arial"><b>INDIA</b><br/><br/>Home.<br/> + 


 New York City<br/><br/>America<br/>Ph.: 23743823</font>;


 var marker = new GMarker(point);

map.setCenter(point,17);

 map.setMapType(G_HYBRID_MAP);

map.addOverlay(marker);

 marker.openInfoWindowHtml(address);});

GEvent.addListener(marker, "click", function() {

 </script>

marker.openInfoWindowHtml(address); 
 
 }
 }


<body onload="load();" onunload="GUnload()" style=" 

 background-color:Transparent">


<div id="map" style="width: 900px; height: 500px"></div>


</body>


</html>

Coming to the code, first in your webpage you need to add one <div> where we are going to load the google map. I have taken a div similar to that and named it as "map". The width and height will specify how much the size of the page will be.

<div id="map" style="width: 900px; height: 500px"></div>

Now I have called a javascript function when body loads, thus, in my sample application, as soon as the page comes to your browser, you will see a gmap loaded. So I have created a javascript load function which will be called as soon as I open the webpage. Now during the page load, we have added a dynamic javascript file which will be dependent on webhost. The line...


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;


 key=ABQIAAAAcl" type="text/javascript"></script

...adds up a file from Google. This is essential, because that file will create the entire map for you. Just one thing that you need is to generate an API KEY for your web host. Be it local host, use http://localhost to it. Just click below and get the key.

You will get a key from here, just replace the key in the key attribute of the javascript line.

After you do that, I have used GBrowserIsCompatible(), its a function which will return true only if your browser is compatible with gmap. The next line will load the gmap control to the div control. GMap2 function takes the control to load and returns a map object which can be referenced later on. Next map.addControl(new GOverviewMapControl()); will add a new control to the map, called GOverviewMapControl

it will be an overview of the map just in the right hand bottom corner to the map.

I can add more controls through addControl Function. I have used GSmallMapControl()

link download download

Free Driver Laptop

Thursday, February 22, 2018