Develop Reference

Intermittent problems displaying google maps in angular view

I've got a google map embedded in an angular view and it displays (as shown below - right) some of the times and then shows up as grey (below - left) when I refresh the page.
My reference to google is in the page head like this:
<script src="https://maps.google.com/maps/api/js?key=<api_key>" type="text/javascript"></script>
My html (in the angular view), looks like this:
<div id="map_canvas" style="width: 100%; height: 300px"></div>
My code in the controller for the view looks like this:
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': addressLine }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myLatLng = { lat: results[0].geometry.location.lat(),
lng: results[0].geometry.location.lng() };
var myOptions = { zoom: 8, center: myLatLng };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: name
});
}
});
Does anyone know why this might happen? Or have experienced this before?
Thanks in advance!

Create a directive for your Google maps. The state's controller executes before the view is loaded. A directive's controller will load after the view.
There are more than likely plenty of Google Map directives out there. So just find something that already exists and tweak it.
For example: http://angular-ui.github.io/angular-google-maps/#!/

How to define multiple locations Using Google Maps API to drop pin for every post in a list of posts generated by a loop

This question might be answered in other posts, but I haven't found the specific answer and I'm having trouble discerning how to logically think through this. I have a site where each post has an address. On each post page I've used the Google Maps API to translate the address into a map location and to show a map with a pin at that address. Works great.
What I need to do now is to show a map at the top of my archive/category/etc pages (pages with a list of posts generated by a query and a loop) and to list a pin for every post that shows up in that particular query. I also need the map to automatically resize to show all of the pins, and not show extraneous map outside of the pins boundaries.
The way it seems that this would happen is that I could create the markers with a script that's inside the loop, so that each time the loop runs, it would generate a new marker and add it to the map.
Another possible method that seems like it has potential would be to add the location to an array for each turn of the loop, and then show the array of pins when the loop is done.
Can anyone give me some advice on how to accomplish this? At this point I'm using the following code which gives me a map and the location of the last post in the list generated by the loop. This code is outside of the loop. I need to know which part I should move inside the loop, and how to adjust it so that I won't simply rewrite the marker during every iteration of the loop.
<script type="text/javascript">
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 3,
}
var myAddress = document.getElementById('theAddress');
var address = myAddress.textContent;
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);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

You need to add markers in a loop. this was taken from a project i was working.
var locations = ["Denver, CO, United States"];
var markers = [];
var iterator = 0;
for (var i = 0; i < locations.length; i++) {
setTimeout(function() {
geocoder.geocode({'address': locations[iterator]}, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
animation: google.maps.Animation.DROP
});
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
log('Geocode was not successful for the following reason: ' + status);
}
});
iterator++;
}, i * 250);
}

Creating button click event (Google Maps)

I am working with Google Maps embedded on my webpage. What I want is to create a button click event, so then after a user has entered an address into a textbox called txtBoxMaps, they can click a button which will display the new location. I tried using: google.maps.event.addDomListener(window, 'click', Initialize); but it doesnt seem to do anything.
Here is my code below:
<script type="text/javascript">
function Initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.01, 27.9),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('GMap1'), mapOptions);
var input = document.getElementById('txtBoxMaps');
});
}
google.maps.event.addDomListener(window, 'load', Initialize);
</script>
<input type="text" id="txtBoxMaps"/>
<div id="GMap1" style="height: 240px; width:570px" ></div>

You'll need to put the listener on the button, and then get the value in the field at that point, like so, using your code:
var input = document.getElementById('txtBoxMaps').value;
At that point you can geocode that address, and set the center of the map to the new location.
function getGeocode() {
var input = document.getElementById("txtBoxMaps").value;
geocoder.geocode( { 'address': input}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}
});
See the documentation on geocoding here: https://developers.google.com/maps/documentation/javascript/geocoding

Google Map centered to a specific search area

I'm using Google Maps api v. 3 in my website. What I want to implement is the following flow:
User is presented a form where he enters an address (of some kind - city, street, etc).
After the form is filled, a map is presented to him, showing him the map centered to the address he entered. Then he can enter a keyword to search against google places in the area of the map.
What I'm stopped at is the translation of the address to map. As I understand the v3 API, I should initialize the map with LatLng center position - but having a city name or so I can't do it just yet. I need some kind of translation between the textual address and coordinates - it's what Google Maps are doing when I search for "Beverly Hills" for example. Some kind of reverse, I guess? How should I do it in the javascript API?
Or is there an option to include a search bar inside the v3 embedded map?

You need to use geocode something like below
Copied from http://code.google.com/apis/maps/documentation/javascript/geocoding.html
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
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);
}
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);
}
});
}
And then you will need to call codeAddress() function on your button click

You can use the Google Maps v3 Geocoding API for translating an address to a lat/lon pair. After this you can use that data to initialize the map.

How can I have a popup Google Map appear when the user hovers over an address?

I want to set up my site so that whenever a user hovers over an address, a small google map of that address pops up. I've been reading through the Google Maps API documentation, but I'm having a hard time finding a simple way to implement this. It seems I have to use what google calls "geocoding" to find the latitude and longitude based on the address... This is the test page I have 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: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
function codeAddress(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 20,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
</head>
<body>
<div onMouseOver="codeAddress('1405 Harrison Street, Oakland, CA')">
1405 Harrison Street, Oakland, CA
</div>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
This, however, causes the map to show up in the map_canvas div... What I really want is to make the map show up as a little popup, sort of like a tooltip. How can I accomplish this? Also, how can I set it up so that when the user mouses-out, the map disappears?
I'm using html and javascript so far, and my website is in coldfusion.

What you'll want to do is set the CSS for your map_canvas div to display:none. This way, you'll have complete control over when it's actually shown by using javascript. Once you've done that, it's just a matter of targeting the hover event for your mouseover div. You'll probably want to do something like this. First make sure you give your mouseover div an onmouseout event
<div onMouseOver="codeAddress('1405 ...)" onMouseOut="hideMap()" >
</div>
Next, target and show the div within your codeAddress function like so.
function codeAddress(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 20,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// here's where you would want to show your map
// just use javascript to set the display style to block
document.getElementById("map_canvas").style.display = 'block'
} else {
... [code here]
}
});
}
Clearly, you'll also want to hide the map upon leaving the div, so your hideMap function will do just that.
function hideMap(){
document.getElementById('map_canvas').style.display = 'none'
}
I know this doesn't implement your ideal 'tooltip' scenario, however I hope this can get you started. Have a look at this tooltip library. I've used it before, and it makes it very simple to turn any div into a tooltip. From there, you should be golden. Happy coding!

Style the map_canvas to have a border and look like a separate window.
On the mouseover change the map_canvas(or whatever iframe you want to stick it in) x,y to match the mouseOver x,y.
Set mapcanvas.style.display = "none"; on mouseout

You could accomplish a popup-window on mouse over quite easy using some jQuery.
Check out the following jQuery function:
http://api.jquery.com/mouseover/
Idea being that you do something like:
<div id="adress1" style="position:relative;">
72 MacDougal Street, New York, United States
<div id="map_for_adress1" style="display:none; position:absolute; top:0; left:0;">
<!--GOOGLE MAP, DIV for DATA or EMBED CODE-->
</div>
</div>
<script type="text/javascript">
$("#adress1").mouseover(function() {
//When mouse is over...
$('#map_for_adress1').show(0);
}).mouseout(function(){
//When mouse is not over...
$('#map_for_adress1').hide(0);
});
</script>
Also, why do you need to use the full Google Maps API to show a map of an adress? Why not just the embed-function?
Something like:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=72 MacDougal Street, New York, United States&iwloc=A&output=embed&ie=UTF8"></iframe>

Building on Banx's solution, I modified the script as follows:
(function(){
var geocoder = new google.maps.Geocoder(),
map = window.map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 16,
center: new google.maps.LatLng(38.92, -77.06),
mapTypeId: google.maps.MapTypeId.ROADMAP
}),
canvas = $("#map_canvas");
$(".address").hover(function(){
canvas.css({
top: $(this).position().top,
left: $(this).position().left
}).show();
geocoder.geocode( { 'address': $(this).text() }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.fitBounds(results[0].geometry.bounds);
} else {
// alert("Geocode was not successful for the following reason: " + status);
}
});
}, function(){
canvas.hide();
});
})();
I used jQuery for handling some DOM stuff there but it should be very easy to change it to whatever library (or not) that you are using. The main difference from Banx's code is it reuses the map and geocoder objects instead of recreating it every time. Also I am using the bounds from the result instead of location because it's more desirable in my opinion.