Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Please try this short example that I use in OpenLayers, a JavaScript map library for expert programmers. </p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;My OpenLayers: Google Layer&lt;/title&gt; &lt;link rel="shortcut icon" href="http://www.gis.com.my/logo.ico" type="image/x-icon"/&gt; &lt;link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" /&gt; &lt;link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" /&gt; &lt;!-- this gmaps key generated for http://localhost:8080/geoserver/ --&gt; &lt;script src='http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRTQDbvAygy0cfGJr8dEMAYKf3RWNBQqP9mjKIsqTfmAlz5LOJ3Xpy5s4w'&gt;&lt;/script&gt; &lt;script src="http://openlayers.org/api/OpenLayers.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var map; function init() { // Create the map object map = new OpenLayers.Map('map'); // Create a Google layer var gmap = new OpenLayers.Layer.Google( "Google Streets", // the default {numZoomLevels: 20} ); // Add layer to map map.addLayer(gmap); // Zoom to Kuala Lumpur, Malaysia map.setCenter(new OpenLayers.LonLat(101.686855,3.139003), 13); } &lt;/script&gt; &lt;/head&gt; &lt;body onload="init()"&gt; &lt;h1 id="title"&gt;My OpenLayers: Google Layer&lt;/h1&gt; &lt;div id="map" style='width: 700px; height: 700px'&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Notice that the google-maps-v3 is forced to be center. As you can see in the following codes I made: <code>map.setCenter(new OpenLayers.LonLat(101.686855,3.139003), 13);</code></p> <p>The LonLat is located in Kuala Lumpur. Bear in mind that it is completely different from your schooldays geography subject, as longitude is x-coordinate. and latitude is y-coordinate. Please refer Cartesian coordination principle.</p> <p>Good luck.</p> <hr> <p>Regards, </p> <p><em><strong>zearth</em></strong></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload