[GIS] How to use Google Maps V3 Geocode with Openlayers

geocodinggooglegoogle mapsjavascriptopenlayers-2

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>

Best Answer

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).

Related Solutions

[GIS] Avoiding Google Maps geocode limit

Like everybody else, I could give you an answer with code, but I don't think somebody has explained to you that you are doing something that is fundamentally wrong.

Why are you hitting this error? Because you are calling geocode every time somebody views your page and you are not caching your results anywhere in the db!

The reason that limit exists is to prevent abuse from Google's resources (whether it is willingly or unwillingly) - which is exactly what you are doing :)

Although google's geocode is fast, if everybody used it like this, it would take their servers down. The reason why Google Fusion Tables exist is to do a lot of the heavy server side lifting for you. The geocoding and tile caching is done on their servers. If you do not want to use that, then you should cache them on your server.

If still, 2500 request a day is too little, then you have to look at Google Maps Premier (paid) license that gives you 100,000 geocoding requests per day for something around 10k a year (that is a lot - with server side caching you should not be reaching this limit unless you are some huge site or are doing heavy data processing). Without server side caching and using your current approach, you would only be able to do 800 pageviews a day!

Once you realize that other providers charge per geocode, you'll understand that you should cache the results in the db. With this approach it would cost you about 10 US cents per page view!

Your question is, can you work around the throttle limit that Google gives you? Sure. Just make a request from different ip addresses. Heck, you could proxy the calls through amazon elastic ips and would always have a new fresh 2500 allotted calls. But of course, besides being illegal (you are effectively circumventing the restriction given to you by the Google Maps terms of service), you would be doing a hack to cover the inherent design flaw you have in your system.

So what is the right way for that use-case? Before you call the google geocode api, send it to your server and query if it is in your cache. If it is not, call the geocode, store it in your cache and return the result.

There are other approaches, but this should get you started in the right direction.

Update: From your comments below, it said you are using PHP, so here is a code sample on how to do it correctly (recommendation from the Google team itself) https://developers.google.com/maps/articles/phpsqlsearch_v3

[GIS] Problems with features, popups and strategy with OpenLayers

you can catch your opened(active) popup with this way:

map.popups[a]

you can change so update its content:

map.popups[a].contentHTML = 'Test Content';
map.popups[a].redraw();

or

map.popups[a].setContentHTML = 'Test Content'

you can show or hide your popup:

map.popups[a].show();
map.popups[a].hide();

you can update position of your popup:

map.popups[a].lonlat.lon = 10;
map.popups[a].lonlat.lat = 10;
map.popups[a].updatePosition();

for openlayers cluster you should check out Cluster Strategy Example here. Only one thing you should do is that define fillColor or externalGraphic for your cluster.

          var style = new OpenLayers.Style({
                pointRadius: "${radius}",
                fillColor: "${getColor}",
                fillOpacity: 0.8,
                strokeColor: "#cc6633",
                strokeWidth: 2,
                strokeOpacity: 0.8
            }, {
                context: {
                    radius: function(feature) {
                        return Math.min(feature.attributes.count, 7) + 3;
                    },
                    getColor: function(feature) {
                        return // Your color selection logic;
                    }
                }
            });

As the last question, i dont understand very well what you want? but try to use removeFeatures instead of destroyFeatures....

i hope it helps you...

Best Answer

Related Solutions

[GIS] Avoiding Google Maps geocode limit

[GIS] Problems with features, popups and strategy with OpenLayers

Related Question