how do I combine geocoding with known coordinates? Lets say, I want to show markers from an array of coordinates.
function codeAddress()
{
var latlng = new google.maps.LatLng(42.745334, 12.738430);
var address = document.getElementById("location").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var mapOptions = {
zoom: 11,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: image_icon
});
}
});
}
So I have latlng coordinates and address of a value, how do I combine these two into the maps?
Thank you!
function codeAddress()
{
// The following sets up your array. Most likely you will retrieve the data
// from elsewhere, so this is just meant as an illustration.
var coords = [];
coords.push({lat:100,long:200, caption:'yo'});
coords.push({lat:150,long:250, caption:'yo yo'});
coords.push({lat:200,long:250, caption:'yo ho ho'});
var address = document.getElementById("location").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var mapOptions = {
zoom: 11,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: image_icon
});
var myLatlng;
// loop through all the elements in the array, and add markers for each to the map object you've already created.
for (i=0;i<coords.length;i++){
myLatlng = new google.maps.LatLng(coords[i].lat,coords[i].lng);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:coords[i].caption
});
}
}
});
}
Related
I'm using the jquery to load the Google Maps. The map doesn't load the right location until I refresh the page many times.
Here's the script:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function codeAddress(address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new MarkerWithLabel({
position: results[0].geometry.location,
map: map,
labelContent: address,
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {
opacity: 1.0
}
});
} else {
//alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize();
Any idea what I'm missing here? Thanks for any and all suggestions!
I want to use the title of a Wordpress post (a location) to become a visible marker on a Google map. This code from Google works fine to show a map (without marker):
<script>function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);</script>
However, when I try to implement the geocoding part the map doesn't show. The two solutions I've tried:
Solution 1
<script type="text/javascript">// <![CDATA[
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(54.00, -3.00),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var geocoder = new google.maps.Geocoder();
var address = '3410 Taft Blvd Wichita Falls, TX 76308';
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);
}
});
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// ]]></script>
2012, March 17, http://manofhustle.com/2012/03/17/google-map-geocoding/
Solution 2:
var geocoder;
var map;
var address = "San Diego, CA";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
if (geocoder) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow({
content: '<b>' + address + '</b>',
size: new google.maps.Size(150, 50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
2014, December 4, Using Address Instead Of Longitude And Latitude With Google Maps API
What am I doing wrong or not seeing?
EDIT: changes map to map-canvas in getElementByID, but still doesn't work.
EDIT 2: through an iframe it works (but you can't move in the map, only scroll)
<iframe width="195" height="195" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="https://maps.google.ca/maps?center=<?php the_title('Groningen'); ?>&q=<?php the_title('Groningen'); ?>&size=195x195&output=embed&iwloc=near"></iframe>enter code here
working example.........http://jsfiddle.net/vezkvkve/1/
html:
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<input type="text" id="mapaddress" />
<input type="submit" id="change" onclick="changeMap()">
<div id="map" style="width: 413px; height: 300px;"></div>
javascript
<script type="text/javascript">
function changeMap(){
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(54.00, -3.00),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var geocoder = new google.maps.Geocoder();
//var address = '3410 Taft Blvd Wichita Falls, TX 76308';
var address= document.getElementById("mapaddress").value;
if(!address) {
address = '3410 Taft Blvd Wichita Falls, TX 76308';
}
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);
}
});
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
return false;
}
</script>
i am trying to get address using reverse geocoding.
but there is some problem in geocoder.geocode({...}) line. even normal alert message also not display.
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(23.0171240, 72.5330533),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
var input=e.latLng;
var lat = parseFloat(input.lat());
var lng = parseFloat(input.lng());
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert(results[1].formatted_address);
}
});
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
add below line inside initialize() function.
var geocoder = new google.maps.Geocoder();
What is the best way to obtain country name during creation of Google Map to update country name field in real time?
I create my Google Map with this code:
function createMap(address,distance){
address=$("#settingMeetingPrefs_meeting_city").val();
distance=$("#settingMeetingPrefs_meeting_distance").val();
var geocoder = new google.maps.Geocoder();
if (address == null)
var address = "{{city}}";
else
var address = address;
if (distance==null)
distance= "{{distance}}";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var latlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
zoom: 7,
center: latlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: distance * 1000 ,
// radius: document.getElementById('distance').value * 1000 , // 10 miles in metres
fillColor: '#0000FF'
});
circle.bindTo('center', marker, 'position');
}
});
}
The country is stored in the geocoding result address component.
To get the country you could do something like this
while (i<results[0].address_components.length){
if(results[0].address_components[i].types[0]=='country'){
console.log(results[0].address_components[i].short_name);
}
i++;
}//end while
more info here Geocoding Strategies
I have a XML file containing meteorological measures with their latitudes and longitudes.
I want to find the city corresponding to a given latitude and longitude with Javascript. How should I do ?
Thanks for your answers
// To initialisation Map and GeoCoder
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
var marker,map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// It is called Reverse Geocoding
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}