Finally, we've got our conclusion about what we're going to do this year. And it involve with google map. So better start studying it today shall we?
Today i'm going to talk about how to integrate GOOGLE MAP in your website. And i'm going to explain and guide you how to place marker on your custom map.
1. Sign up Beta Key. Go here. Put your website url in the box below.
2. Copy javascript from example in key page For example
3. Now, start writing a simple HTML
<html><head>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAeImax-ZV27pxekFFvP............lFgTumTUvfA6Ng" type="text/javascript"></script>
</head>
<body></body>
</html>
Put script from the key above in the head area. And Edit the From Sensor=true_or_false to Sensor=true
4. After that, in the body. Put Div tag which you want it to be canvas of the map in
<div id="mapCanvas" style="width: 800; height: 600"></div>
5. Put another javascript in HEAD tag. This will be custom thing you're going to add script afterward.
<head>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAeImax-ZV27pxekFFvP............lFgTumTUvfA6Ng" type="text/javascript"></script>
<script type="text/javascript">
function initialize(){
var map = new GMap2(document.getElementByID("mapCanvas"));
}
</script>
</head>
This function will be called everytimes the body of page loaded. var map = new GMap2(document.getElementByID("mapCanvas")); Will build new GMap Object from library retrieve from Google Website.
6. after map builded. Add Custom code to customize the map. Such as set map center view.
map.setCenter(new GLatLng(13.793697,100.325303), 13);
Set to Latitude and Longtitude using object Called GLatLng with Zoom Level = 13.
7. Add additional function map.setUIToDefault(); to add mouse zooming functionality.
8. Edit BODY Tag to call this function everytimes it start.
<body onload="initialize()" onunload="GUnload()"> Add GUnload to prevent Memory Leak.
9. Now Test It here.
10. You can add custom overlay to map, such as marker or additional information. Then use methed map.addOverlay() method.
map.addOverlay(new GMarker(new GLatLng(13.793635,100.326054)));
now We've got a marker point to our building.
That's All For today. Hope i'm coming up with new thing to update you guy! have Fun with google map Kub
00d80876-719f-4c7f-939b-3d364a073c9e|1|5.0