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/#!/
Related
I have accordion (twitter-bootstrap), and on each I have a map.
Accordion blocks generates in foreach. Maps generates as partial view, that takes model with latitude and longitude and block id.
It calls in foreach:
#if (item.Latitude != null)
{
<p>Map:</p>
<div class="map-margin">
#{Html.RenderAction("Map", "Default", new {model = item});}
</div>
}
And action returns this partial view:
#model MPS.Administration.Models.ReportModel
<div id="map-canvas-#Model.Id.ToString()" style="width: 470px; height: 270px;"></div>
<script type="text/javascript">
$('#map-canvas-#Model.Id').ready(function() {
initialize();
});
function initialize() {
var lat = #Model.Latitude;
var lng = #Model.Longitude;
var latlng = new google.maps.LatLng(#Model.Latitude, #Model.Longitude);
debugger;
var mapOptions = {
center: latlng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var name = 'map-canvas-' + #Model.Id.ToString();
var map = new google.maps.Map(document.getElementById(name),mapOptions);
debugger;
// create a marker
var image = '../Content/Images/map_icon.png';
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
}
</script>
On layout I included script for js api.
Now I have 4 blocks, but only the last have map block (and it have only google logo and gray background without the map :( ). In debugger I see that lat and lng is same all 4 times. I think the problem is how I call initialize() map. Please help me to solve this issue.
The map si show only in the visible div. For the other you shuuld see only a grey background and in some case a small portion of the map in the upper left corner.
For see the map in every block you should use map.resize() or better use a genaration function for each time you show a new map. Initialize tipcally is call only when the windows is created and this this case the maps not visible fails
I am currently stuck on getting google maps to display on a site. This worked in a dev environment after a while. I came to put this into live and thought that I would just need the API key in the src
What I have is
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API CODE HERE&callback=initMap"
async defer></script>
<script type="text/javascript">
initialize();
function initialize() {
google.maps.event.addDomListener(window, 'load', function () {
codeAddress("#Model.Postcode, #Model.Address");
});
}
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: 17,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// create a marker
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: 'Latitude: ' + results[0].geometry.location.Ya + ' Longitude :' + results[0].geometry.location.Za
});
}
});
}
But this only produces the error of
This page was unable to display a Google Maps element. The provided Google API key is invalid or this site is not authorized to use it.
Many thanks
You first have to obtain an API key from the website and replace it with the "MY_API CODE HERE" part
That should be working, just because we all make mistakes, are you sure you copied the API key correctly? You need to make sure the trailing '&' is still in there after you add the key.
You could also try generating another key and using that. The process for doing that is here: https://developers.google.com/maps/documentation/javascript/get-api-key#key
This is my first post and I hope I can get some help since I am relatively new to the development arena, please excuse me if my questions are a bit stupid.
I am trying to make sort of a dashboard implementing a dependency from a drop down list in html - let's say that based on the drop down list value selected, a div tag containing a google maps reference should be updated.
For example:
I choose a continent from the drop down list, and then Google will shift its view on that area, later on showing customized points of interest on the map. Can someone help me or suggest a possible solution?
Thank you!
Make sure to include the Google Maps Javascript API (I assume you've already done this):
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
JS:
var map;
var geocoder;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 10,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
geocoder = new google.maps.Geocoder();
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
$('input.maps-input').on('change', function() {
geocoder.geocode({ 'address': $(this).val()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
map.setCenter(results[0].geometry.location);
else
alert('A location could not be found. ' + status);
});
});
});
Then add a dropdown (or any type of input) with class maps-input to your page and a div with class map-canvas (of course you can change these class names to whatever you want).
I have a wordpress site with a large number of pages, each page represent a physical location. Now for each page I would like to display a google map based on the address.
I know I can do this by installing a google map plugin, but that requires that I manually, for every post, create a location based on the address and add a shortcode to the post/page that results in a google map. This is a LOT of work for this site with hundreds of locations.
I would like to be able to create an "address-custom-field" for each post programmatically.
This is where I am now:
<div id="map_canvas" style="width: 190px; height: 130px; margin-top: 5px;"></div>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
How do i change center: new google.maps.LatLng(-34.397, 150.644), into an adress?
You can edit the template file for these pages and embed a google map similarly to this example: https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
Note that it'll be better to perform geo coding of all addresses once, and save the coordinates in different custom field for each page -- that way you won't need to create geocoding request on each page load.
Here is untested code that should be close to what you need:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!-- in the body -->
<div id="map-canvas"></div>
<script>
(function () {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var address = <?php echo json_encode(get_post_meta(get_the_id(), 'address-custom-field', true)) ?>" ;
(new google.maps.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);
}
});
})()
</script>
I'm in the middle of this myself... Its no easy feat that's for sure. It involves AJAX (WordPress version) Geo-Data-Store plugin to geocode your posts and pages and custom loops.
Either way you have to add location data to each post.
I am trying to use the google maps javascript API to map an address based on this example.
https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple
The documentation recommends the clientside javascript approach as the best way to deal with quotas on requests. So far so good. My problem is in moving from this example to my specific case. My addresses are already in a database so I don't need the user to enter one. Also I do not want the map to load with the page. Instead, I want the map for the address to load when the user clicks a link.
I have a script working that loads the map in a div using initialize (). But my problem is getting initialize to work with geocode. The geocode in the example depends on initialize loading with bodyonload which I do not want.
Here is code. Would appreciate any suggestions:
javascript
var map;
var geocoder;
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);
}
});
}
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.7562008,-73.9903784);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
html
<input id="address" type="hidden" value="Palo Alto CA">
View map without geocoding
<div id="map_canvas" style="width:300px; height:300px;"></div>
View map of geocoded address
The only issue I had with your script was the following line in the initialize() function:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
By declaring var map, your script is just declaring a local variable named map, as opposed to using the global map variable declared at the top of your script.
By removing var, the script uses the global variable and runs fine:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Finally, to get the geocoded map to load on the link click, change onclick for your geocoded address to onclick="initialize();codeAddress();".
Added:
Try combining your initialize() and codeAddress() methods into the following:
function initialize() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 18,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
And then just call initialize() from your link.
Basically, what we're doing is taking the call to geocoder.geocode() that codeAddress() was performing and inside the resulting delegate, we're using results[0].geometry.location to initialize the map. This way, the temporary latlong doesn't need to be displayed.