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 - Display a map and a marker by retrieving latitude and longitube with php

I have a database of points in latitude and longitude format (ex. 32.3185414, -86.954298) and I want to display a map of each point on its own webpage.
I would like to display a marker of that point on the map with a tooltip (if possible) displaying custom text. I use php. Is it possible?

I think you must use Google map javascrip Api for showing your lat long points on webpage.
See this link
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
and for tooltip you can use
var marker = new google.maps.Marker({
position: point,
title:"Hello World!"
});
Codelord

How do I set the center of a Google Fusion Table Map?

I am using the following sample code to embed a Google Fusion Tables map:
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4, -122.1),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Address',
from: // My table id,
},
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You can see from the above code that the "center" is set to a specific long and lat. If I remove the "center" property, it does not render the map at all.
I am looking at some way to automatically determine the best location to center in on. I believe using just general Google Maps that you can determine the boundaries of the location markers and center in on that? So maybe there is a way to get the list of locations from the table and then working out the boundaries from there?
Note: I understand there are other options for embedding the map, such as an iframe, but iframe is not an option for us in this project. Further, I understand that you can take the HTML/JS from the "Publish" option within the Fusion table, but the requirement is for the user to be able to embed the map with only the table id so they cannot copy/paste any HTML/JS.

If you geocode the addresses externally and include the coordinates in the table, you can query the table using the Fusion Tables API v1 or GViz (the google visualization API), add the coordintates to a google.maps.LatLngBounds object, and use that to center and zoom the map to show all the points with google.maps.Map.fitBounds.
example (using GViz)

Google map generating incorrectly

I have a program that takes in a zip code and makes a google map. The div that the map is set tohidden until the map is made. Once the map is made the div is set to display : block. The problem is that the first time the map is generated (and only the first time) it looks like this:
Once I hit the find a store button again it looks like this:
I have already tried to make a initial call to the map method (which I kept hidden until a real call is made) but this does not fix the issue. I don't want to show all my code (there is a lot) but here is how I make the map.
<div id = "map_canvas" style = " height: 300px; width: 300px;"></div>
//Creates a new center location for the google map
var latlng = new google.maps.LatLng(lat, lng);
//The options for the google map
var mapOptions = {
zoom: 7,
maxZoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Creates the new map
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Also note that both images below have the correct markers in the correct place.
Any suggestions?

this is a common problem. you need to trigger a map redraw after changing the container. most of the time this is caused by showing/hiding the div.
in v3 it's:
google.maps.event.trigger(map, 'resize')
in v2 it's:
map.checkResize()

It looks like when you initialize the map, it is completely zoomed out, which brings out the single 250x250 tile that google uses.

I would suspect that possibly an error is occurring on your first "Find Store" button click that might prevent the map creation code from being reached and executing properly.

45 Degree Google map

How do I get google maps to tilt and display a 45% view?
Documentation says that it should do it "automatically", but it doesn't seem to be doing it. Is this a feature Google is holding back from the API?
Click the link to and zoom in to see the feature as it is used on google maps
Google Offices
<html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" type="text/javascript"></script> </head> <body>
<div id="Map" style="width: 100%;height: 500px"> </div>
<script>
var latlng = new google.maps.LatLng(37.4219720,
-122.0841430);
var myOptions = {
zoom: 3,
scrollwheel: false,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("Map"), myOptions);
var bounds = new google.maps.LatLngBounds();
bounds.extend(CreateMarker(map,37.4219720,-122.0841430).getPosition());
map.fitBounds(bounds);
function CreateMarker(map, latitude, longitude){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
});
return marker; } </script> </body> </html>

Here is demo of using the 45 degree satellite imagery:
http://code.google.com/apis/maps/documentation/javascript/examples/aerial-rotation.html
The methods you are looking for are setTilt() and setHeading().
http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
Note: 45 degree imagery is only available at certain zoom levels (18,19,20) and certain areas.
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(45.518970, -122.672899),
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// changes map to use 45 degree imgary
map.setTilt(45);
map.setHeading(90);
}

AFAIK, Google Maps on desktop browsers can't tilt maps by itself; only Google Earth, the Google Earth browser-plugin and the Android app can do that (currently).
Could you provide a link to the documentation that says that it should tilt automatically?
The page at the link you provide only switches on the plugin if you have it (obviously) and select the 'Earth' button on the top right.
When HTML 5 is supported more widely, I’m guessing Google Maps will be able to use vector graphics as well. Till then, it’s tiled bitmaps or the Earth plugin, I’m afraid.

I might be wrong, but I though Marty (op) originally asked for the tilted view of "satelite imagery" (3D transforms of the 2D satelite images) as opposed to the aerial photage of specific cities that have been added to GMaps over the past years.
Google Maps has this feature (tilted view / two different angles), through the "tilt view" control from maps.google.com. (the API is there map.setTilt(), it just isn't enabled).
Google earth used to have this feature, now it seems Google Earth is begin phased out, and it's features have been merged into Google Maps, with the exception of "tilted view". Another exception is the Google Maps Android API, which seems to be having it!! Especially in the Google Navigation app for Android, it makes use of that in a very cool way). (Supposedly done to add more value to the Android SDK over iOS).
I guess down the road it'll be made available, when other services start offering comparable services. I hope this will happen pretty soon. Are there any other map providers doing anything similar? I think Bing is just doing more aerial photos??