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!
Related
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();
I'm having some trouble with printing a Google Map through the JavaScript API V3. The problem is that the Map is displayed in two parts and the top and bottom part of the map are partly overlaying each other.
The code looks like this:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 12,
center: latlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
codeAddress();
}
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);
}
});
}
Can anyone say what's wrong?
Try this it works
.map{
width: 1000px;
height: 410px;
overflow: visible;
position: absolute;
background-color: rgb(229, 227, 223);
}
Html tag inside (div id="map_canvas" class="map")
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);
}
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
});
}
}
});
}