1

I'm following the examples of a free on OpenLayers, in the code below I am calling various layers of google maps api. Have checked with the code book and is correct but nothing appears on the browser.

Tested with one at a time and appeared, does anyone know what is wrong in the code?

Also I've taken the spec version of the api call to google maps and did not work. Nothing appears.

    <!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 especificando a versão 3.2 -->
 <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', {}); 

 //Função de inicialização  - google.maps.MapTypeId.HYBRID (híbrida)
 var google_hybrid = new OpenLayers.Layer.Google(
    "Google Hybrid",
    {type: google.maps.MapTypeId.HYBRID}
    );

 //Função de inicialização  - google.maps.MapTypeId.TERRAIN (topológica)
 var google_physical = new OpenLayers.Layer.Google(
    "Google Physical",
    {type: google.maps.MapTypeId.TERRAIN}
    );

 //Função de inicialização  - google.maps.MapTypeId.TERRAIN (topológica)
 var google_satellite = new OpenLayers.Layer.Google(
    "Google Satellite",
    {type: google.maps.MapTypeId.SATELLITE}
    );

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

//Adiciona as Google Layers ao mapa
map.addLayers([google_hybrid,google_physical,google_satellite,
    google_streets]);


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

 //Verifica se o mapa tem um ponto central e o extende a sua extensão máxima
 if(!map.getCenter()){
 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: 1000px; height: 900px;'>
 </div>

</body>
</html>
Improve this question

3 Answers 3

Reset to default
3

By nothing appears in the browser you mean the blank page, right? This happens when you didn't close some brackets ), } or missed "," or ";" etc.

Your layer Google Streets looks strange, it is like you missed the piece of code, you don't say the type and the bracket { is not closed:

//Função de inicialização  - google.maps.MapTypeId.ROADMAP (street layer default)
 var google_streets = new OpenLayers.Layer.Google(
    "Google Streets",
    {
        );
Improve this answer
0
2

The correct code:

    <!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 especificando a versão 3.2 -->
 <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', {}); 

 //Função de inicialização  - google.maps.MapTypeId.HYBRID (híbrida)
 var google_hybrid = new OpenLayers.Layer.Google(
    "Google Hybrid",
    {type: google.maps.MapTypeId.HYBRID}
    );

 //Função de inicialização  - google.maps.MapTypeId.TERRAIN (topológica)
 var google_physical = new OpenLayers.Layer.Google(
    "Google Physical",
    {type: google.maps.MapTypeId.TERRAIN}
    );

 //Função de inicialização  - google.maps.MapTypeId.TERRAIN (topológica)
 var google_satellite = new OpenLayers.Layer.Google(
    "Google Satellite",
    {type: google.maps.MapTypeId.SATELLITE}
    );

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

//Adiciona as Google Layers ao mapa
map.addLayers([google_hybrid,google_physical,google_satellite,
    google_streets]);


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

 //Verifica se o mapa tem um ponto central e o extende a sua extensão máxima
 if(!map.getCenter()){
 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: 1000px; height: 900px;'>
 </div>

</body>
</html>
Improve this answer
0
0

I ran into this before when testing out openlayers, and using some existing code, and you might need to call a toolkit (Dojo) as well as the google maps api. Many of the free examples assume it is in use by default.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.