Develop Reference

Show Address On Google Maps Label And Add Business Name On Maps

I am very new to Google MAPs API. I am trying to create a map for my business with that replicates the below picture. I have the code below as well where I have the lat and long coordinates, and a marker initiated based on those cordinates. How can i show something similar like this with javascript, where on page load
A label as below shows the name of the business and address, with also a clickable link (an arrow for directions, not shown in picture)
Custom html showing business name next to marker on maps
?
<div id="map"></div>
<script>
function initMap() {
// The location of UluruBBS
var uluru = { lat: 33.931, lng: -84.337732 };
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), { zoom: 15, center: uluru });
// The marker, positioned at Uluru
var marker = new google.maps.Marker({ position: uluru, map: map });
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[mykey]&callback=initMap">
</script>

Found another alternative via google maps api docs - by using Google Maps Embedded API. Please refer to the doc for more information.

google maps v3 appears distorted and doubled

This code works perfectly on jsfiddle and any other JavaScript sandbox app, but it doesn't work on my website.
HTML :
<div id="mapcontainer" style="position:absolute;width:280px;height:160px;"></div>
JS :
<script src="http://maps.googleapis.com/maps/api/js?key=*********************************&sensor=false"></script>
<script>
var myCenter = new google.maps.LatLng(33.436150, -117.623090);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
google.maps.event.trigger(map, 'resize')
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
It looks like this:
Notice how the top 2/3 is distorted and the bottom 1/3 is fine. How can I fix this?

It seems there must be some other problem in code.
Your google maps code looks perfect, I have made a fiddle to show the difference.
From your script it seems you're using key for google maps. I think that is not necessary in v3. so try replacing it as shown below.
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

I stumbled over this page after I had the same problem myself on a google map I was developing. The solution I came up with was to add the following code after the google map javascript.
$(window).resize(function(){ initMap(); });
The "initMap();" part is so it just refreshes the map function. If you named the function something different that is what you need to use.
Ultimately I realize this is a patch to the problem. But it works like a charm and is barely noticeable to the end user. All you are doing is refreshing the map function when you resize the window.

I figured out a similar issue due to the solution to this problem in comments.
It was a case of looking at one of the images in the map with a css debugger and seeing if it was affected by any other styles on the page

Google Maps Javascript API V3 how to Placemark show name only

As a Title, I want show Placemark with Name field.
Basically, google map show Placemark with blue balloons.
but i don't wanna see this blue ballons. Just show Name only like google earth.
is it possible with google maps javascript api?
=============KML===============
<Folder>
<name>Point Features</name>
<description>Point Features</description>
<Placemark>
<description><![CDATA[LABEL<BR><BR><B>ELEVATION</B> = -2147483648.0000000]]></description>
<name>lnd_a</name>
<Point>
<coordinates>126.3680042851,34.7669071990,-2147483648.000</coordinates>
</Point>
</Placemark>
<!-- MY KML FILE HAS MORE LINE -->
</Folder>
=============Script Source===============
<script type="text/javascript"src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(34.7958078334,126.4441270970);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var ctaLayer = new google.maps.KmlLayer('http://MYSITES/kml/101.kml');
ctaLayer.setMap(map);
}
In Chrome Google Map Placemark shown with blue ballons.
In Google Earth Placemark shown with just name.
These screenshot base on same KML file.
How to show only name with Google Maps in Browser??

I've never used it, but there is a library to show labels on a marker. If you used a transparent marker with a label you may get the desired outcome.
MarkerWithLabel
If that doesn't work, I used to create custom labels for markers using an OverlayView.
Create marker with custom labels in Google Maps API v3
This would be an alternative to using KML Layers I guess.

There is no implemented method to show anything else than an image there.
So 1 option could be: use the iconStyle to put there the name(an image that contains the name, this may be created by a serverside script that accepts parameters, so they don't need to be static).
Another option(using the Maps-JS-API): Instead of showing the KML-layer, parse the layer on your own and create custom overlays with the names.

Geolocation: Mapping and POI with OpenStreetMap

I'm making a website, where the visitor gets its position showed on a map and within a chosen radius (e.g. 10km) the visitor can see some POIs (e.g. Restaurants, Bars).
I have this code so far:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=[MY_KEY]&sensor=false">
</script>
<script type="text/javascript">
function init()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition (processPosition, handleError);
}
else
{
alert("Geolocation not supported in this browser");
}
}
function processPosition(pos)
{
var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
var myOptions = {
center: latlng,
zoom: 16,
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:"You are here! (at least within a "+pos.coords.accuracy+" meter radius)"
});
}
function handleError(err)
{
alert('An error occurred: ' + err.code);
}
</script>
</head>
<body onload="init()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
It shows me my position on a map with a marker using Google Maps.
The thing is, I would like to use the maps from OpenStreetMap (they are updated regularly and there are not restrictions), but unfortunately I haven't managed to implement it yet.
Here are the maps I need: Maps
1. Is there an example (tutorial), which shows how to use their API, like Google's?
2. Does OpenStreetMap has something like POIs, like Google Places? Or is it even possible to use Google Places together with the maps of OpenStreetMap?

If you want to use OpenStreetMap data, you should look into OpenLayers. This works a little bit differently than the Google Maps or Bing Maps APIs: you have to install the OpenLayers JavaScript library on your server, and it takes care of displaying the map data ("map tiles") which can come from various sources: OpenStreetMap (OSM), Google Maps, your own custom map data, etc. The OpenStreetMap website itself uses OpenLayers to display the maps.
1: There is documentation (although I'm afraid not quite as good as for the Google Maps API) and plenty of examples, including some for using OpenStreetMap data, alone or together with Google data (enter "osm" in the "filter" box at the top).
2: As for POIs, you can place a "Marker Layer" on the map as in this example, including customizable marker icons and bubbles which appear when clicking on the icons, but you'll have to take care of the data for the POIs and the search functions yourself. So, if you want, you are free to use the Google Places API and then display the results as markers on an OpenStreetMap - as long as you display a "Powered by Google" logo.

The list of all OSM frameworks available from openstreetmap.org, with particular notice on the list of so called "webmaps", as it pertains to your question: http://wiki.openstreetmap.org/wiki/Frameworks#Webmaps
nJoy!

Google Map V3 not centering, displays only part of map

I'm developing a jQTouch-based app for the iPhone and part of it uses the Google Maps API (V3). I want to be able to pass the geolocation coordinates to the map and have it center the location with a marker. What I'm getting now is the map at the proper zoom level but the desired center-point appears in the upper-righthand corner. It's also showing only about a third of the map area (the rest is gray) and it behaves somewhat erratically when you pan or zoom. Here's the code:
var coords = { latitude : "35.510630", longitude : "-79.255374" };
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
});
BTW: It looks and behaves the same on other platforms/browsers as well.
Thoughts?
Thanks in advance,
Mark
Added
Here's a link that'll show exactly what's happening:
Screen shot of iPhone emulator

I'm guessing you're using AJAX to display the map, or have the map hidden at some point and then display it based on an action?
In this case Google doesn't know the size of the map container and it will draw only part of the map, usually off-centered.
To fix this, resize the map, then re-center on your lat/lng. Something like this:
google.maps.event.trigger(map, 'resize');
// Recenter the map now that it's been redrawn
var reCenter = new google.maps.LatLng(yourLat, yourLng);
map.setCenter(reCenter);

The solution for getting the map renedered correctly is to execute your Maps-Code on pageAnimationEnd-Event of jQTouch.
Example within Page #div:
<div id="map_canvas" style="width:100%; height:100%; min-height:400px; background:#ccc;"></div>
<script type="text/javascript">
$('#map').bind('pageAnimationEnd', function() {
var mapOptions = {
zoom: 13,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: pos
});
map.setCenter(pos);
}, function() {
console.log('Device Environment Capable of Geolocation but not Available - Geolocation failed');
}
);
} else {
console.log('Device Environment Not Capable of Geolocation - Geolocation failed');
}
});
</script>
Though, i find myself having trouble to make the Map fullscreen-height. Any help in this case is appreciated. Note that im using DataZombies bars extension for fixed footer navigation.

see my answer on Google Maps API 3 & jQTouch
basically, your #map_canvas div is not visible at the time you're constructing the map as the div it's in has been hidden by jqtouch. the api can't deal with this and get's the size wrong.
would be much easier if gmaps v3 allowed setting explicit size in the constructor (as v2 did).
anyway, delay constucting map until 'pageAnimationEnd'.

Make sure you have set the width/height of the canvas absolutely (i.e.)
$("#map_canvas").width(window.innerWidth).height(window.innerHeight - $('.toolbar').height());
Of course that assumes you have the jqtouch toolbar up and running...

Had the same exact issue loading a map with directions after loading content with AJAX and showing and hiding the map-canvas div.
You have to trigger the resize event, like Brett DeWoody says, but I found that my global variable went out of scope and I had to refer to them, i.e. the google map variable, INSIDE my functions explicitly on the window object. Here's what I have inside my directionsService response:
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
google.maps.event.trigger(window.map, 'resize');
}

Brett DeWoody's solution worked, but as I'm showing the map in modal the only solution for me was to add setTimeout like this:
setTimeout(function() {
google.maps.event.trigger(map, 'resize');
var reCenter = new google.maps.LatLng(lat, lng);
map.setCenter(reCenter);
}, 500);
After adding setTimeout the map renders and centers perfectly.