When I started working on Camiguin Guide, I planned on including a map with markers pinned on the different places to visit.
Today, I had the chance to play around Google Maps API and integrate it with ModX CMS that manages the website. The integration is on the front-end only, limited to the template, as I can barely write PHP codes.
Anyhow, I just want to share a simple integration of Google Map API which you can apply on your website. Just basic knowledge of HTML and JavaScript will get you through this.
The first step is to call the Google MAP API on the template with this script placed between the <head>….</head> of your template:
<script src=”http://maps.google.com/maps/api/js?sensor=false”></script>
The next step is to assign a div where the map will be displayed. You can display the div on any part of your website. In Camiguin Guide, I placed it on the main wrapper, where the contents are usually displayed, and assign the div with the id map_canvas.
To make sure that the map fits my design, I threw in some inline styling.
<div id=”map_canvas” style=”width:100%; height:600px;”></div>
Then we go ahead with initializing the Google Map API, put the following script under the first script.
<script>
function initialize() {
var latlng = new google.maps.LatLng(9.1732164, 124.7298765);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
</script>
The values for google.maps.LatLng should correspond to the Latitude and Longitude of the place that you want to show as default. You can verify the values at iTouchMap.com. The values displayed above (9.1732164, 124.7298765) are the Lat & Lng of Camiguin Island Philippines.
The “zoom” under the myOptions variable can be between 0,7 (Out) to 18 (In). It is a measure of how zoomed in (or zoomed out) the default location will be when first viewed. “center” refers the value, in Latitude and Longitude, that will act as the center of the page, also during the first loading of the page. There are several options for the “mapTypeID”, I chose HYBRID. You can use ROADMAP, SATELLITE or TERRAIN.
Take note of the value of document.getElementById which is the id assigned earlier, map_canvas.
Now that we have completed the initial components of the map, we now add onload=”initialize()” to <body>
<body onload=”initialize()”>
The map is now integrated into the template. But I wanted to enhance its function by adding “markers” into the map. I tried two markers for White Island and Mantigue Island.
To do this, I created new variables that is similar in structure as “var latlng” complete with the location of the islands. You can assign the var its own name, I named them mantigue and whiteisland.
var mantigue = new google.maps.LatLng(9.170907,124.82666);
var whiteisland = new google.maps.LatLng(9.256308,124.653969);
Incorporating this into the the second script, I arrived with the following:
<script>
function initialize() {
var latlng = new google.maps.LatLng(9.1732164, 124.7298765);
var mantigue = new google.maps.LatLng(9.170907,124.82666);
var whiteisland = new google.maps.LatLng(9.256308,124.653969);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
</script>
With these values, I can now add the markers into the second script.
marker = new google.maps.Marker({
map:map,
title:"Mantigue Island",
draggable:true,
animation: google.maps.Animation.DROP,
position: mantigue
});
marker = new google.maps.Marker({
map:map,
title:"White Island",
draggable:true,
animation: google.maps.Animation.DROP,
position: whiteisland
});
I was interested in labeling the markers so I added “title” with the corresponding names of the location, Mantigue Island and White Island.
The final second script is,
<script>
function initialize() {
var latlng = new google.maps.LatLng(9.1732164, 124.7298765);
var mantigue = new google.maps.LatLng(9.170907,124.82666);
var whiteisland = new google.maps.LatLng(9.256308,124.653969);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
marker = new google.maps.Marker({
map:map,
title:"Mantigue Island",
draggable:true,
animation: google.maps.Animation.DROP,
position: mantigue
});
marker = new google.maps.Marker({
map:map,
title:"White Island",
draggable:true,
animation: google.maps.Animation.DROP,
position: whiteisland
});
}
</script>
Then I add in the CSS style and some other elements of the page’s template. Voila, I now have a map of Camiguin Island with markers.
I will start adding descriptions, with internal links to articles, to the map in January once I get the hang of JavaScript and have more time playing around Google Map API.
wao..very informative indeed..gotta bookmark this page for future use… n__n
Thank you, Joey!
What a great resource!