Bali Care / Bali Tourism Blog

I just wanna share about how to add Google Map API to one of your static page on wordpress. Today, i got an order to add google map for Rakornas APTIKOM 2007
website,honestly i never used google map for show on a website.

I decide to search google map plugins for wordpress, but i don’t find the suitable (read:can not using, hehehe ). Finally i decide to insert Google Map API code manually to the page,in my case is INFORMASI page (note: you can change INFORMASI with About or id page)

Ok, herewith the tutorial :

1. Add codes below into header.php :

<script xsrc="http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAA2Nmi-JVOLN5YPU05yieGLRRQ2j6GUnc-
VlscH_qozsSBeb3KKRTw0arI0fZTMTs79msJcwJ2D37iYw"
mce_src= " http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAA2Nmi-JVOLN5YPU05yieGLRRQ2j6GUnc-
VlscH_qozsSBeb3KKRTw0arI0fZTMTs79msJcwJ2D37iYw"
type="text/javascript "> </script>
&ltscript type= "text/javascript"> var map; function onLoad()
{ if (GBrowserIsCompatible())
{ map = new GMap2(document.getElementById( " map " ));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(-8.680476,115.254564), 15);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl()); } }</script>

high light on this part is :

• change key=ABQIAAAA2Nmi-JVOLN5YPU05yieGLRRQ2j6GUnc-
  VlscH_qozsSBeb3KKRTw0arI0fZTMTs79msJcwJ2D37iYw with your API KEY
• change latitude and longitude coordinate on this row map.setCenter(new GLatLng(-8.680476,115.254564), 15); follow this url for easy way to get your coordinate

2. Insert onload=”onLoad()” into tag < body>

3. Insert codes below into page.php after you call the_content() function:

<?php if (is_page('INFORMASI')) {
// remember to change INFORMASI with the page that you want ?>

<div id="map" style="width:400px;height:400px; float:left;
border: 1px solid grey;">

</div>

<?php } ?>

You may change the width and height with your content size