To reproduce, download CefSharp from here: https://github.com/cefsharp/CefSharp
And run the CefSharp.WinForms.Example
Now run my fiddle on your browser and the CefSharp browser: http://jsfiddle.net/bjmL9/
I added an alert displaying full address data on click (street_number, route, neighborhood, locality, administrative_area_level_2, administrative_area_level_1, country, postal_code).
Compare the data displayed on your browser to the one on the CefSharp browser.
The problem: In my browser, the locality shows as "Culiacán Rosales", but on the Cef browser it gets truncated to "Culiacán". The country behaves weird too with Cef displaying "Mexico" instead of "México" (unaccented).
I am on the edge of quitting cef cuz i can't get a google match on this problem and no idea how to fix it...
This is the code of the fiddle since it won't last for ever:
<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<link href="MapStyle.css" rel="stylesheet" type="text/css" media="all"/>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
var map;
var geocoder;
function initialize() {
var placeMarkers = [];
geocoder = new google.maps.Geocoder();
var aquamiller = new google.maps.LatLng(
24.832956,
-107.389775);
var mapOptions = {
zoom: 16,
center: aquamiller,
};
map = new google.maps.Map(
document.getElementById('map-canvas'),
mapOptions);
createSearchBar(map, placeMarkers);
google.maps.event.addListener(
map,
'click',
function(e) {
getAddress(e.latLng, function(address) {
alert(
address.street_number + ', ' +
address.route + ', ' +
address.neighborhood + ', ' +
address.locality + ', ' +
address.administrative_area_level_2 + ', ' +
address.administrative_area_level_1 + ', ' +
address.country + ', ' +
address.postal_code);
});
});
}
function getAddress(latLng, callBack)
{
geocoder.geocode({'latLng': latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var address = {};
var components = results[0].address_components;
for (var i = 0 ; i< components.length ; i++) {
address[components[i].types[0]] = components[i].long_name;
}
callBack(address);
}
else {
alert('No results found');
}
}
else {
alert('Geocoder failed due to: ' + status);
}
});
}
function createSearchBar(map, markers)
{
var input = /** @type {HTMLInputElement} */(document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(/** @type {HTMLInputElement} */(input));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
console.log(places);
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
console.log(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(16);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</body>
</html>
Hey wait once more I see the same behavior (missing " Rosales" and accent in "México") with both my standard Chrome 35 and IE 10.
So, maybe it's related to a missing CEF language pack: https://github.com/cefsharp/cef-binary/tree/cef_binary_1.1364.1123/Release/locales .. the NuGet you use probably only has en-US.pak
... Tested a bit more with your fiddle example. Dropping es.pak in my install didn't help. BUT I see similar if I search for "Sønderborg, Denmark" in the search box in the map. (At some locations there it says "S**o**nderborg", no "ø" ) So are you sure its browser related and not just the google API?
update Asking with language=es as in:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=es&libraries=places"></script>
Alters the response from googles API. Currently verified using my iPad and your fiddle!