Google Maps loads to the right of the marker! - google-maps

For some reason, Google Maps is loading the following map with the marker to the left - I have no idea why.
I've got this page in an iFrame, which is getting loaded in a lightbox, but an issue is it doesn't load the map exactly ON the marker, it's always down to the left.
<link href="https://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-0, 0);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = '1 Dover Street, London, United Kingdom';
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latlng = new google.maps.LatLng(results[0].geometry.location);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
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>
If anyone could let me know why it's doing that, that would be great!
Thanks!

Related

Adding address marker to this Google Map API V3?

I have this map working fine, i just wanted to add the default google click address marker and if not that a custom bubble for the address?
Anyone help me out, i'm sure its simple but cannot figure out whereabouts to put it..?
<script type="text/javascript">
var map;
jQuery(function($) {
$(document).ready(function() {
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"), myOptions);
console.dir(map);
google.maps.event.trigger(map, 'resize');
$('a[href="#tab2"]').on('shown', function(e) {
google.maps.event.trigger(map, 'resize');
});
});
});
Many thanks..
Figured it out..
Anyone who needs a marker and for it to work with jQuery tabs try this..
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map2'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);

google map api markers

I created a map that pulls the address from a hidden input value in the html, can someone help me out in displaying a marker on the address?
<script>
var map;
var geocoder;
var markers = new Array();
var firstLoc;
function myGeocodeFirst() {
geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': document.getElementById("text_address").value },
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
firstLoc = results[0].geometry.location;
map = new google.maps.Map(document.getElementById("map_canvas"),
{
center: firstLoc,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
else {
document.getElementById("text_status").value = status;
}
}
);
}
window.onload=myGeocodeFirst;
</script>
<body>
<div id="loc">
<input id="text_address" type="hidden" size="10" value="Moshe Cohen 1, Bat Yam, Israel"></div>
<div id="map_canvas"></div>
</body>
</html>
Thanks, Gidon
So, I just added the following to my script to add the marker --
<script>
var map;
var geocoder;
// var markers = new Array();
var firstLoc;
function myGeocodeFirst() {
geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': document.getElementById("text_address").value },
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
firstLoc = results[0].geometry.location;
map = new google.maps.Map(document.getElementById("map_canvas"),
{
center: firstLoc,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker=new google.maps.Marker({
position:firstLoc,
});
marker.setMap(map);
}
else {
document.getElementById("text_status").value = status;
}
}
);
}
window.onload=myGeocodeFirst;
</script>

Changing the Google Maps marker/infowindow position

I'm currently using this snippet to display my map on a certain page
<div id="map_canvas" style="width: 400px; height: 300px;"></div>
<div class="map_js">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var myLatlng = new google.maps.LatLng(0, 0);
var mapOptions = {
zoom: 15,
center: myLatlng,
scrollwheel: true,
scaleControl: false,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var geocoder_map = new google.maps.Geocoder();
var address = 'New York';
geocoder_map.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: map.getCenter()
});
var contentString = 'Hello World New York is the most populous city in the United States.';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker)
});
infowindow.open(map, marker)
} else {
alert('Geocode was not successful for the following reason: ' + status)
}
});
</script>
</div>
but, as you can see in this image http://d.pr/i/whoI the infowindow is somehow overlapping a bit with the default maps UI.
Does someone know how to solve this issue perhaps?
Best Regards, Jen

How to use zip code instead Lat and Lng in Google maps API

I wonder if there is a way to use zipcode instead of Lat and Lng, using this snippet or using Geocoding Requests.
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(22.1482635,-100.9100755);
// var latlang = new google.maps.zipcode(7845); <- Is there a way to do that?
var myOptions = {
zoom: 8,
center: latlng,
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,
title:"zipcode"
});
}
</script>
You can use the Google GeoCode API to request the latitude and longitude for the zipcode and go from there.
The API Request URL would look like this if you wanted to do this directly or via some other medium
http://maps.googleapis.com/maps/api/geocode/json?address=50323&sensor=false
Where 50323 is your zip code.
Or you could use the google Javascript API to do this all via jQuery.
var geocoder; //To use later
var map; //Your map
function initialize() {
geocoder = new google.maps.Geocoder();
//Default setup
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);
}
//Call this wherever needed to actually handle the display
function codeAddress(zipCode) {
geocoder.geocode( { 'address': zipCode}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//Got result, center the map and put it out there
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);
}
});
}

Get address from google map api v3 in English

I use google map api v3 to get coordinate and address from a point, but google return address in French. Here the script i use to get the address, how can I force Google map to return the result in English.
var map;
var geocoder;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
function initialize() {
var myOptions = {
center: new google.maps.LatLng(36.835769, 10.247693 ),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
var marker;
function placeMarker(location) {
if(marker){ //on vérifie si le marqueur existe
marker.setPosition(location); //on change sa position
}else{
marker = new google.maps.Marker({ //on créé le marqueur
position: location,
map: map
});
}
document.getElementById('lat').value=location.lat();
document.getElementById('lng').value=location.lng();
getAddress(location);
}
function getAddress(latLng) {
geocoder.geocode( {'latLng': latLng},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
if(results[0]) {
document.getElementById("address").value = results[0].formatted_address;
}
else {
document.getElementById("address").value = "No results";
}
}
else {
document.getElementById("address").value = status;
}
});
}
}
According to the documentation you can change the language of presentation of the maps API by adding a language parameter, like so:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=ja">
Alternatively, according to this answer, you can change the service used using the google.load command, like so:
<script type="text/javascript">
google.load("maps", "2",{language: "de",base_domain: 'google.de'});
...
</script>
(code taken from linked question). Here's a link to the documentation for google.load. I'm thinking changing the base_domain will achieve the desired result, but I haven't tested it.