We Keep Coding

google maps api getZoom() after zooming

Small problem.
So, i'm working with the google maps api for a small project at my internship.
This is how I make my map.
function initMap() {
window.map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 62.323907, lng: -150.109291},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage ='https://developers.google.com/maps/documentation/javascript/';
srcImage += 'examples/full/images/talkeetna.png';
overlay = new USGSOverlay(bounds, srcImage, map);
}
The problem I have is the next: I want to determine the zoom, I tried this with:
var zoom = window.map.getZoom();
alert(zoom);
This works! But the only problem I have, this always shows me '12'. And I want to get the current zoom level, after zooming in or out and that doesn't seem to work, it always keeps displaying '12'. How can I fix this?

It is quite simple add a "zoom_changed" listener for your map and get the current zoom of the map
The code can be like
map.addListener("zoom_changed", function() {
alert("Zoom :" + map.getZoom());
});

Adding a google map to my site

I want to add a map to my site to show a local business, but I don't want to use an image, I wanted to use google maps like I have seen on some websites.
I tried using this:
https://developers.google.com/maps/documentation/javascript/reference#MapOptions
But it doesn't work (do you need to have it up on a server to work? I am just testing it local at the moment)
EDIT: Works now, I don't know what I did but it works.

there are few things you need to add ADD LAT, ADD LONG and ADD YOUR ADDRESS HERE
<div id="map-canvas" style="height:300px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script></script>
<script>
jQuery(document).ready(function($){
codeAddress();
});
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(ADD LAT, ADD LONG);
var mapOptions = {
zoom: 14,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
geocoder.geocode( { 'address': 'ADD YOUR ADDRESS HERE'}, 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);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize());
</script>

If you just want to create a map to show where is your business as most the websites the answer is much simpler.
1 - Go to Google maps website and search for the address you want to add.
2 - Once you find the address in the button right of the screen click in settings
3 - Select share a embedded map.
4 - Select the size of the map and you will get something like this on the bar in the side
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3192.61190945592!2d174.74475940000002!3d-36.85176959999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d0d4793eebb1d67%3A0x6830f22a202256c9!2sPonsonby+Rd!5e0!3m2!1sen!2snz!4v1393896861642" width="400" height="300" frameborder="0" style="border:0"></iframe>
Put into your website and job done :)

Google Map looks moved inside the div

I'm having problems with google maps. I load the maps JS in a file where I append a modal div using ajax (and jquery), which contains the map. Something like the following image is what I got:
However, when I "close" the modal (which removes the div and, thus, the map) and try to open it again, a problem occurs:
Apart from looking incomplete, it looks like maps thinks its top left corner is some pixels out of the div. I assure you this, because when I try to move the map it refreshes its content and removes the "non-visible" (and unluckily visible, in this case) parts of the map. I'm leaving here the code I use to show the map (it's pretty straightforward, though).
var marker = null, geocoder, latLng, map = null;
geocoder = new google.maps.Geocoder();
latLng = new google.maps.LatLng(41.3865, 2.1648);
var myOptions = {
zoom: 16,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false
};
if(map === null) {
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function clearOverlays() {
if (marker !== null) {
marker.setMap(null);
marker = null;
}
}
function getPosition(address, title) {
clearOverlays();
geocoder.geocode({
address : address,
region : 'es'
},
function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var result = results[0];
latLng = result.geometry.location
marker = new google.maps.Marker({
'title': title,
'map': map,
'position': latLng,
'animation': google.maps.Animation.DROP
});
map.setCenter(latLng);
}
}
);
}
getPosition(place.address, place.title);
For the sake of the example, let's assume place is an object containing address and title

Version 2 had a checkresize() which I remember using in cases like this where the map would shift the center point. I think the v3 equivalent is something like this:
google.maps.event.trigger(map, 'resize');

Showing a marker on an embedded Open Street Map based on address data

At the moment I serve pages showing a google map with a marker using an address retrieved from my database. I currently use a fairly simple piece of javascript code to add that marker by geocoding. My js code is dynamically generated by php. All is static except the "query" definition which gets initialized with the address search string.
I new to OSM and did some research to see if it can achieve this. At the moment I'm not sure it can. I found there are several js api's like OpenLayers which I'd need to use.
To sum it up :
How to add and show a single marker to an OSM, where the location is based on an address instead of a latitude/longtitude pair?
My current google based code is:
<script>
var geocoder; var map; var marker;
var query = 'Deutschland, Berlin, Platz der Republik 1, 11011';
function initialize()
{
var companyLocation = new google.maps.LatLng(51.964577109947506, 5.07568359375);
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 11, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
codeAddress();
}
function codeAddress()
{
var address = query;
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,
title: "Bundestag",
labelContent: "",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
} else {
$('#map_canvas').html('<p style="margin: 15px">Address could not be found</p>');
}
});
}
</script>

See http://wiki.openstreetmap.org/wiki/Nominatim
Not going to write the code for you, but that wiki page has detailed information on how to call the Nominatim geocoding service.

Google maps into website based on user info

So i checked out all the relating posts. I was wondering, which i have yet to be able to find with about 20 google searches and about 45 website visits, if it is possible, based on users information that i could load a google map to display the users desired location.
Your probably asking, "Give me more details, that could mean anything!"
Your right, it could. So say i have a user that gives me (i got it from the database)
var stuffIGotFromMyWebServerWithPHPandMySQL = {
myComment: "Hey Everyone, party at my place!",
country: "US",
state: "MT",
city: "Bozeman",
address: "Emerson Cultural Center"
};
Now that i have the information of what city/state/country the event is in, and the name of a place, The Emerson is a real place in bozeman that google maps will recognize, is there a way to load a map with a marker at that location? I have the latitude/longitude for bozeman, MT, but i do not have such information about the Emerson. Is there a way i could provide the just the words, and have it bring up the place with a marker, on a static, no user interaction allowed map?
and i would probably want to load it through js
Thanks,
Michael B Paulson

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var marker;
function initialize() {
var geocoder = new google.maps.Geocoder();
geocoder.geocode(
{
'address': 'Emerson Cultural Center, Bozeman, MT'
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 6,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
map:map,
draggable:false,
animation: google.maps.Animation.BOUNCE,
position: results[0].geometry.location
});
}
}
);
}
</script>
<div id="map_canvas" style="height:300px;width:300px"></div>
try this code and see if helps, you can use the Geocoder fro the google maps api to convert text to latlang.
you can see the following example from the documentation here http://code.google.com/apis/maps/documentation/javascript/examples/geocoding-simple.html