Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

How to use Google Maps V3 Geocode with Openlayers. Below is my code but the function does not execute when I try to integrate it with Openlayers. This works with my original google v3 file. Below is 2 sets of code one for Google maps with geocode and the other with openlayers

 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
 <!--CSS for Map -->
 <style type="text/css">

     html, body, #map {
            margin: 0;
            width: 100%;
            height: 100%;
        }
 </style>
<style type="text/css">

div.olControlPanel {
 top: 0px;
 left: 50px;
 position: absolute;
}
.olControlPanel div {
 display: block;
 width:  22px;
 height: 22px;
 border: thin solid black;
 margin-top: 10px;
 background-color: white
}

.helpButtonItemInactive {
 background-image: url("help.png");
}

#output-id {
 margin: 10px 250px;
}

 </style>

 <style type="text/css">
    #controls {
    position: absolute;
        bottom: 1em;
        left: 100px;
        width: 200px;
        z-index: 20000;
        background-color:;
        padding: 0 0.5em 0.5em 0.5em;
    }
    #controlToggle {
        padding-left: 1em;
    }
    #controlToggle li {
        list-style: none;
    }
</style>

<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="css/style-map.css" rel="stylesheet" type="text/css" />

<script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false">
</script>
<script src="js/firebug.js"></script>
<script src="js/OpenLayers.js"></script>
<script type="text/javascript">

 var map;
        function init(){


  // Styles for Default and Select states
            var myStyles = new OpenLayers.StyleMap({
            "default": new OpenLayers.Style({
                fillColor: "#000",
                fillOpacity: 0.3,
                strokeColor: "#000",
                strokeOpacity: 0.3,
                strokeWidth: 1,
                graphicZIndex: 1
            }),
            "select": new OpenLayers.Style({
                fillColor: "#ccc",
                fillOpacity: 0.6,
                strokeColor: "#ccc",
                strokeWidth: 1,
                label: "Label for Mouseover",
                labelAlign: "cc",
                fontColor: "#333333",
                fontOpacity: 0.9,
                fontFamily: "Arial",
                fontSize: 14,
                graphicZIndex: 2
            })
        });

        layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );


        vlayer = new OpenLayers.Layer.Vector( "Editable",{
            styleMap: myStyles,
            rendererOptions: {zIndexing: true}
        });

        map = new OpenLayers.Map( 'map', {

        // Add Openlayers Map Controls 
        controls: 

                 [
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.MousePosition(),
                    new OpenLayers.Control.ScaleLine(),
                    new OpenLayers.Control.OverviewMap(),

                 ]   
         });

         var geocoder = new google.maps.Geocoder();
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: map, 
        position: results[0].geometry.location
    });
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});
  }

// Make Variables for Google Version 3 
var gmap = new OpenLayers.Layer.Google(
    "Google Streets", // the default
    {numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
    "Google Hybrid",
    {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
    "Google Satellite",
    {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
);
var gphy = new OpenLayers.Layer.Google(
    "Google Physical",
    {type: google.maps.MapTypeId.TERRAIN}
);

    // Add layers to map
    map.addLayers([gmap, ghyb, gsat, gphy]);




    // Google.v3 uses EPSG:900913 as projection, so we have to transform our coordinates
    map.setCenter(new OpenLayers.LonLat(25, -28).transform(
    new OpenLayers.Projection("EPSG:4326"),
    map.getProjectionObject()
 ), 5);


    // Now we must make a layer for the circles and call our styles
        var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer", {
            styleMap: myStyles,
            rendererOptions: {zIndexing: true}
        });

        // Now we add the vector and circle layers
        map.addLayers([polygonLayer]);

        // Options for the sides wanted in the default circle e.g 3 sides = triangle
        polyOptions = {sides: 40};

        // At this point we must make a control to draw a circle on the map after a button to activate is clicked
        polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer,
                                        OpenLayers.Handler.RegularPolygon,
                                        {handlerOptions: polyOptions} );


        // This adds the naivgational pan panel
        map.addControl( new OpenLayers.Control.Navigation() );

        // This adds a control to be able to switch between the different layers
        map.addControl( new OpenLayers.Control.LayerSwitcher() );

        // This adds the Scale Line on the bottom left of the window
        map.addControl( new OpenLayers.Control.ScaleLine() );

        // This adds the overview map on the left toward the bottom of the window there is a + button
        map.addControl( new OpenLayers.Control.OverviewMap() );

        // Now we add the an alert for an option to delete once the user has drawn a circle or vector on the map
        polygonLayer.events.on({
        featuresadded: function (event) {
        var confirmPolygon = function () { return confirm("Do you want to keep this polygon?") };

        if (!confirmPolygon()) {
            polygonLayer.removeFeatures(event.features);
          }
         }
        });

        // Now we call an alert to get the bounds or coordinates from a circle or vector we have drawn 
        polygonLayer.events.on({
        featuresadded: onFeaturesAdded
        });

        function onFeaturesAdded(event){
        var bounds = event.features[0].geometry.getBounds();
        var answer = "bottom: " + bounds.bottom  + "\n";
        answer += "left: " + bounds.left  + "\n";
        answer += "right: " + bounds.right  + "\n";
        answer += "top: " + bounds.top  + "\n";
        alert(answer);
        }

        // The Drag function is now made and called
         // Add Drag
     drag = new OpenLayers.Control.DragFeature(polygonLayer, {
     autoActivate: true,
     onComplete: displayRadius
     });


    function displayRadius(circle) {
 var area = circle.geometry.getArea();
 var radius = 0.565352 * Math.sqrt(area);
 alert(radius);
  }



         // A Hover Control is now made and executed
        var select = new OpenLayers.Control.SelectFeature(polygonLayer, {hover: true});
        map.addControl(select);
        select.activate();

        // The drag Control and the control for vectors is made
        map.addControl(drag);
        map.addControl(polygonControl);

        // This is the toggle control for the buttons on the bottom left corner
        document.getElementById('noneToggle').checked = true;
        document.getElementById('irregularToggle').checked = false;
        }

        function toggleControl(element) {
        for(key in controls) {
            var control = controls[key];
            if(element.value == key && element.checked) {
                control.activate();
            } else {
                control.deactivate();
             }
           }
         }

    </script>
   </head>
   <body onLoad="init()">



    <div id="map"></div>
 <!--Call the Circle Controls onto the Canvas -->
    <div id="controls">

<!--Finally for the Radio buttons -->
    <ul id="controlToggle">
         <li>
            <input type="radio" name="type"
                   value="none" id="noneToggle"
                   onclick="polygonControl.deactivate()"
                   checked="checked" />
            <label for="noneToggle">navigate</label>
        </li>
        <li>
            <input type="radio" name="type"
                   value="polygon" id="polygonToggle"
                   onclick="polygonControl.activate()" />
            <label for="polygonToggle">draw polygon</label>
        </li>
    </ul>

  <div>
<input id="address" type="textbox" value="Sydney, NSW">

<input type="button" value="Geocode" onclick="codeAddress()">
 </div>
    </div>


   </body>
 </html> 

The code that I am battling with is:

         var geocoder = new google.maps.Geocoder();
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: map, 
        position: results[0].geometry.location
    });
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});
 }

Below is the working code for the geocoder:

       <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: map, 
        position: results[0].geometry.location
    });
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
 });
 }
</script>
</head>
<body onload="initialize()">
<div>
<input id="address" type="textbox" value="Sydney, NSW">

<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map_canvas" style="height:90%;top:30px"></div>
</body>
</html>
share|improve this question
4  
Reading the Google Maps API Terms - you should be only returning the geocoded addresses to the Google Maps API - 10.1.1 (g) "you must not use geocodes obtained through the Service except in conjunction with a Google map" code.google.com/apis/maps/terms.html –  Mapperz Feb 29 '12 at 15:29
add comment

4 Answers 4

Try the below code.

var geocoder = new google.maps.Geocoder();

geocoder.geocode({ 'address': address }, function (results, status) {

  if (status == google.maps.GeocoderStatus.OK) {
           console.log(results[0].geometry.location);                              
        }
        else {
             console.log("Geocoding failed: " + status);                            
        }
    });
share|improve this answer
add comment

The google maps API popup in Openlayers has been fixed:

http://trac.osgeo.org/openlayers/ticket/2984

https://github.com/openlayers/openlayers/commit/92f04a7a4277a6c818ef2d40a2856910ed72d3d6

You just need to either modify or update your OpenLayers library.

share|improve this answer
add comment

Besides compliance with Google Maps API Usage Terms , the problem with your code is trying to add a Gmaps Marker to an OpenLayers map, which is impossibile and causes the error you are probably battling with.

I have created a fiddle here showing (open your browser console for proof) that the address is correctly geocoded and left as an exercise to the reader implement the remaining part using a OpenLayers.Marker (which boils down to cut'n paste mostly).

share|improve this answer
add comment

Note:

Google Maps servers are blocking now OpenLayers (i.e. Popup a modal dialog about the Map data). Every time you click the map. The blocking applies to desktop and mobile app as well.

Hence, it is futile to use Openlayers with Google Maps.

share|improve this answer
1  
ns-1m - you should probably read this from OL dev folks: trac.osgeo.org/openlayers/ticket/2984 –  teknocreator Apr 6 '12 at 10:58
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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