Integrate Google Map Into Website

mindster.net

Main Menu

Login Form

Home

How to

Web Hosting

Integrate Google Map Into Website

Written by joe

Wednesday, 09 December 2009 01:32

Google Map

Google Map is a well known product produce by one of the giant company, google. Google Map is a web mapping services provided by google free of charge (for not commercial purpose). The popularity of this product increase year by year and today, most of computer users are familiar with this product. One of the main strength of this product is performance and easy to use, mean end user do not need to install anything into their machine. By using Google Map, user are able to view the map using different way such as photo satellite, terrain and map. This services also offer another feature such as integration with youtube, image, wikipedia, webcam and etc.

This guide will demonstrate on how to integrate this powerful services into a web application. It's fairly easy to integrate map services into web application by following this step by step guide.

Requirement:

Google account - easy for us to access the document
Basic HTML knowledge
HTML development tool (optional)

Step 1:

Go to this url http://code.google.com/apis/maps/documentation/v3/ to get all necessary information on how to integrate your web site with google map API. In this case we use google map API version 3.

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(3.9, 101.42);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

To make this map show your location, you need to change latitude and longitude in your html code. Please refer code new google.maps.LatLng(3.9,101.42) and change the value accordingly to map your location. It's pretty easy to implement this feature in your web site. On the next section, we will explain on how to put a marker inside your map.

Step 2: Insert Marker in Google Map

The purpose of this marker is to show user your exact location in google map. Use the following code and insert into existing code. Put this new code next after "var map = newgoogle.maps.Map(document.getElementById("map_canvas"), myOptions);"

   
  var marker = new google.maps.Marker({
      position: latlng , 
      map: map, 
      title:"This is my location!"
  });

After completing this code, you will amaze with the result produce by this function. But wait, how about if you want to insert multiple marker in your map. What you need to do is duplicate the marker.

Step 3: Insert Multiple Marker

To insert multiple marker, we just need to duplicate the marker function code. After duplicate the function, put this new code just below the code we made recently. Please refer code below to get clear picture.

  var nextlatlng = new google.maps.LatLng(3.6, 101.42); 
  var marker = new google.maps.Marker({
      position: nextlatlng , 
      map: map, 
      title:"This is second location!"
  });

Please take a look at the code, there's no big change happen except the var we called "nextlatlng" at the top and the next 3 line after that. After completing all this task, go to your browser to see the result. After completing all this task, we believe that you have understanding on how to integrate your web site with Google map. To view the sample, please go to this link .

Last Updated on Thursday, 11 March 2010 07:26

Add comment

JComments