Hi i am currently working on angular Google maps https://github.com/dylanfprice/angular-gm
i am facing difficulties in setting the bounds and map center
<gm-map gm-map-id="'infoWindows'" gm-center="options.map.center" gm-zoom="options.map.zoom" gm-bounds="bounds" gm-map-options="options.map" class="map">
<gm-markers gm-objects="clinics"
gm-get-lat-lng="{ lat: object.practice.latitude, lng: object.practice.longitude }"
gm-get-marker-options="{ title: object.practice.name }"
gm-on-click="clk = object; infoWindow.open(marker.getMap(), marker);">
</gm-markers>
</gm-map>
make sure your map is already loaded.
therefor it is highly recommended to use promises.
var gmapPromise = angulargmContainer.getMapPromise('<mapId>');
gmapPromise.then(function(gmap) {
$scope.myGoogleMap = gmap;
});
In your case would be 'infoWindows'.
as there is to less context in your question, i can't really give you an answer what is wrong with your particular code but i'll give you some snippet which is always useful:
$scope.updateGoogleMap = function(map, options) {
// triggers a resize of the map and sets the correct center position
// requires a google map object and a google maps mapOptions object
$timeout(function(){
google.maps.event.trigger(map, 'resize');
map.setOptions(options);
});
};
a Google Maps mapOption object looks like this:
{
center: new google.maps.LatLng(47.123, 10.123),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
as ng-hide/show lead to some google maps resize misbehaviour, you might wanna call this when toggling views.
**by the way, if your are using the gm-map-options tag with a valid google.maps.MapOptions, you don't need the the extra 'gm-bounds', 'gm-zoom' or 'gm-center' arguments
Related
I've searched through the Google Maps JavaScript API documentation and I can't seem to find the appropriate options to make my map's labels and location markers look like this:
Rather than this:
I realize the differences are subtle but it's what my client wants.
Using the Google Maps Styling Wizard, the styles on the top image appear to be produced by the Standard map with no styling at all (the JSON produced is just an empty array).
The closest I can get is the bottom image, using the following (which is not much more than just the default options):
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 26.769528, lng: -82.265607},
zoom: 15,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'terrain'],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
fullscreenControl: false,
streetViewControl: false
});
Any guidance would be greatly appreciated.
#xomena was correct - the tile style has changed in the release and experimental version. Had to use the previous version of 3.31 to match the look.
I'm working on an SPA project (ionic, so it's angular with ui-router) where I need to display two different maps on two different pages/controllers.
The first map is a general map (let's call it the main map)where a few locations are marked and the second one (let's call it the edit map)is a focus on a specific location where the user can edit the location by dragging the marker.
The general implementation scheme I'm using is that I'm calling a initMap method from mappingService that instanciates a google map from each controller.
$rootScope.markers = [];
this.initMap = function initMap(mapTarget, mapCenter) {
// the initMap function initialize the map it takes two arguments:
// + mapTaget which defines the html element the map is bound to.
// + mapCenter that defines the center of the map and whether to display the center
var markup = "<div id='" + mapTarget.mapId + "'></div>";
document.getElementById(mapTarget.containerId).innerHTML = markup;
var centerPos = new google.maps.LatLng(mapCenter.lat, mapCenter.lng);
$rootScope.map = new google.maps.Map(document.getElementById(mapTarget.mapId), {
center: centerPos,
zoom: 18,
disableDefaultUI: true
});
// eventually place a person marker for the user's position
if (mapCenter.display) {
console.log('placing the position marker');
$rootScope.markers[0] = new google.maps.Marker({
position: {lat: mapCenter.lat, lng: mapCenter.lng},
map: $rootScope.map,
title: 'userLocation',
icon: './img/person_icon.png'
});
}
};
The only difference is that on the main map I'm first calling a geolocate service the return a promise and I'm using the returned location coordinates to then call the mapping service:
geolocateService.getLocalPosition()
.then(function(coords) {
mappingService.initMap(
{containerId: $scope.mapContainer, mapId: $scope.mapId},
{lat: coords.lat, lng: coords.lng, display: true}
);
While on the edit map I'm calling directly the mapping service.
mappingService.initMap(
{containerId: $scope.mapContainer, mapId: $scope.mapId},
{lat: $scope.location.lat, lng: $scope.location.lng, display: false}
);
I am able to render both maps without problem and even to add markers and some event listeners.
However, I run into the problem that after some sequence of actions, for example going from the main map to the edit map two times, one of the map would suddenly become blank (white to be exactly, so it doesn't seems to be something that I could solve by resizing the map). I'm receiving the Ag object and the only difference is that I don't get the mapDataProviders property on the broken map.
When it works, I get:
Ag object when it works
While when it doesn't, I get:
Ag object when it doesn't work
The code snippet above is my last implementation attempt. I've been trying to implement those maps from a lot of different ways to no avail. Among those attempts, I tried:
totally separates both instanciation, dividing the initMap methods into an initMainMap and an initEditMap.
using one instance for both maps and replacing the DOM element> This is what you see above with the following additional method that is called when leaving the view:
this.removeMap = function removeMap(containerId) {
var container = document.getElementById(containerId);
$rootScope.markers = [];
container.innerHTML = '';
// important part:
var old_element = container;
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);
delete $rootScope.map;
}
knowing that on both views I have either:
or
<div id="edit-map-container"></div>
I'm trying to understand what would make the google map API return a map without mapDataProvider (which I believe means that the map works and even starts to render except that it lacks the tiles to display).
P.S. it looks like there is a memory leak, which is apparently a well known issue.
If anyone has the answer to this, I'm a bit lost right here!
I have initialized and rendered a Google Maps object with my own UI-settings. Now when a user interacts I want to change what and where to display some of the controls. For instance I try to do this ->
map.mapTypeControl = true;
map.mapTypeControlOptions = {
style: google.maps.MapTypeControlStyle.DEFAULT,
position: google.maps.MapTypeControlStyle.RIGHT_CENTER
};
where map is my Google Maps object, but the map doesn't render it. What do I need to do to make my google Maps object update it's settings?
I've used this page as reference, https://developers.google.com/maps/documentation/javascript/controls, but can't figure it out.
A general answer on how to update these type of settings is most welcome.
Thanks!
Mistake from me. Should have done ->
map.setOptions({
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
position: google.maps.ControlPosition.BOTTOM_CENTER }
});
I would like to load two geojson layers to my map and be able to style them independently with different rules. I can display both my geojson files with the below code, but since they are both part of the same map.data object I have only been able to apply universal styling to both. Is there any way around this? Ultimately(longer term goal) I would also like to be able to toggle the different layers on and off with a checkbox as well (I am focusing on independent styling first so as not to overcomplicate the problem)
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12,
center: {lat: 39.218509, lng: -94.563703}
});
map.data.loadGeoJson('https://url1');
map.data.loadGeoJson('https://url2');
map.data.setStyle(function(feature) { //styling rules here}
google.maps.event.addDomListener(window, 'load', initialize);
any help would be very much appreciated. I saw some threads that looked applicable (such as Google maps GeoJSON- toggle marker layers?) but I wasn't sure how to apply it specifically for my purposes.
So I just had to do something similar and needed to add 2 geojson files and style them differently. What you want to do is initialize the map and then add 2 different layers. Basically set the styling for both. Below is my code with notes. I actually used this function Angular in a service and returned a promise.
Set up your map options
var mapOptions = {
zoom: 4,
scrollwheel: false,
center: new google.maps.LatLng(40.00, -98),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Set your map to a variable.
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
Initialize 2 variable that will take layers. I did state and county.
var countyLayer = new google.maps.Data();
var stateLayer = new google.maps.Data();
Then load the GeoJson files for each layer.
countyLayer.loadGeoJson('counties.json');
stateLayer.loadGeoJson('states.json');
After that set the style for each layer.
stateLayer.setStyle({
strokeColor: 'red',
strokeWeight: 5
});
countyLayer.setStyle({
strokeColor: 'black',
strokeWeight: 1
});
The last step is to set the layer to the map.
countyLayer.setMap(map);
stateLayer.setMap(map);
After this I returned a promise but you could just return the map object. Does this make sense / help answer your question?
Also, within each layer setStyle() function you can add dynamic styling through functions. Like add a function to fillColor that would change the color based on data in the GeoJson file.
I'm converting an application that uses v2 of the google maps api to v3. As part of this I've had to upgrade the MarkerManager to the v3 version too.
I have a bit of an odd issue in that Markers are not showing until the user zooms the map, then they appear.
If I then zoom back to the original zoom level the markers remain, so it is not a min\max zoom issue. There are no errors reported in firebug\javascript console and if I put a breakpoint or console.log at the location where the marker is added, it's definitely being added.
The application is fairly large, so I can't put all the source here, but the code where the markers are added is as follows:
console.log("Adding Marker");
markerManager.addMarker(marker, 1, 19);
markerManager.refresh();
And the code where marker is created is similar to this:
var latLng = new google.maps.LatLng(y, x);
var marker = new MarkerWithLabel({
position: latLng,
title: "title",
labelClass: "marker",
labelContent: "Test",
icon: icon,
labelAnchor: new google.maps.Point(26, 32)
});
and icon is just a google.maps.MarkerImage. MarkerManager and MarkerWithLabel are documented here:
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/docs/reference.html
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.7/docs/reference.html
EDIT: I should add that before doing anything with the marker manager after creating it I have the following, so I'm not trying to add anything until it's loaded:
google.maps.event.addListenerOnce(markerManager, 'loaded', function () {
Anybody have any suggestions on where my mistake is likely to be?
I've found a fix for this, though I'm not really sure what other ramifications there might be to this. Basically in markermanager.js I replaced the following (~line 130)
google.maps.event.addListener(map, 'dragend', function () {
me.onMapMoveEnd_();
});
google.maps.event.addListener(map, 'zoom_changed', function () {
me.onMapMoveEnd_();
});
with this and the markers appear as expected. I'm still open to other ideas as I'd prefer not to be editing the markermanager file and I'm not sure of the performance (or other) impact of doing this
google.maps.event.addListener(map, 'idle', function () {
me.onMapMoveEnd_();
});
EDIT: Looking at the markermanager.js dev version, the have all 3 events in there. So it may just be worth using v1.1 if anybody else has this issue:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js