[GIS] Google Maps API and OpenLayers

google-maps-apiopenlayers-2

I need to open Google Maps at Latitude: -30.0330600 Longitude: -51.2300000.

We report that the object map or call the API?

<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='utf-8' />
 <title>My OpenLayers Map</title>
 <script type='text/javascript' src='OpenLayers.js'></script>

 <!-- Chamada a Api Google Maps -->
 <script src="http://maps.google.com/maps/api/js?sensor=false&v=3.2"></script>

 <script type='text/javascript'>

 //Variável map
 var map;

 //Função a ser chamada para criar o mapa na leitura da página
 function init() {

 // A classe Map espera dois argumentos "map_element" que o ID do elemento HTLML geralmente uma DIV e opções de mapa {key:value}
 map = new OpenLayers.Map('map_element',{
    maxExtent: new OpenLayers.Bounds(
        -128 * 156543.0339,
        -128 * 156543.0339,
        128 * 156543.0339,
        128 * 156543.0339),
    maxResolution: 156543.0339,
    units: 'm',
    projection: new OpenLayers.Projection('EPSG:900913'),
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
 });

 //Função de inicialização - google.maps.MapTypeId.ROADMAP (the default)
 var google_streets = new OpenLayers.Layer.Google(
    "Google Streets",
    {numZoomLevels: 20}
    );  


//Adiciona as camadas ao mapa
map.addLayers([google_streets]);


 //Camada de controle que vai mostrar as camadas no mapa
 map.addControl(new OpenLayers.Control.LayerSwitcher({}));


 center = new google.maps.LatLong(-30.0330600,-51.230000);

 if(!map.getCenter(center)){
 map.zoomToMaxExtent();

 }
 }

 </script>
</head>

<body onload='init();'> <!-- Chama a função js init() --> 

<!--Elemento HTML onde o mapa é exibido -->
 <div id='map_element' style='width: 50px; height: 500px;'>
 </div>

</body>
</html>

Best Answer

You need to use LatLng instead of LatLong:

center = new google.maps.LatLng(-30.0330600,-51.230000);

Also, if you use a map_element with a bigger width:

<!--Elemento HTML onde o mapa é exibido -->
<div id='map_element' style='width: 500px; height: 500px;'></div>

everything will be ok:

enter image description here

Related Question