I am trying to create a map using angular 9 google maps library. In resolutions from 320 to 599, i want my info window container out of map (because my content is such that, it has to come in column view) because it won't fit in the map window. But I am unable to do so. I am using custom Popups for that.
The solution to show InfoWindow outside the Google Maps Div might not be a great idea. I am not sure of how well that would work.
Another solution would be to register a Click event on the google map, and capture that information with an unique ID and pass that information to a box outside the div and display the required data.
Related
I have a Google Map that I have embedded on my web site. I have managed to size and position the iFrame so that it sits where I want it to sit on my web page. I am using the new Google Maps version.
However, I want to be able to shift the centre of the map to the right, because as it standsnow, the box that displays the map layers is covering some of the locations I have marked.
I am not at this point using any Javascript or jQuery. I have simply taken the iFrame link provided by Google's embed feature and placed it in my HTML. I see there are other questions about map centering, but I can't parse them for my situation because they assume some Javascript implementation. Also, I'm hoping that I do not have to take on a whole API or Javascript library to solve this. Further, it is unclear to me if the other questions relate to the new Google Maps version, which is what I'm using.
Is there a way I can alter the centre of the embedded Google Map?
Just add a "center" parameter to your iframe url. Like so - center="40.714728,-73.998672". You can get the required coordinates by searching in google maps and picking them from the address.
You could alternatively also use a query parameter but center is more accurate.
refer - https://developers.google.com/maps/documentation/static-maps/intro#location
I have initialized the map on load and after clicking on a list item markers will be added to the map based on data from backend. After that by clicking a button the map should be displayed in another view.The map is displayed as a small square in the top left corner.
I know this problem is caused due to initializing the map onload. But I have few more map views so I dont want to initialize everytime.
Is there anyway to solve this?
I am using the resize method..But I want to know where exactly I need to use the function..If in div containing the map container, on which event should I attach resize?
When you are doing the resize, you could fire a topic publish and on the subscribe for that topic, you could fire the resize trigger within Google Maps API?
I have created a widget to display google earth and when I click the button, google earth disappears and is replaced by google map.
I am using the gwt earth 3 and gwt map v3. When I click the button the first time, google map is display well.
But when I click the button again, google map is displayed very small inside a grey area like that, which used gwt-map v2.
In gwt map v3, it doesn't have method checkResizeAndCenter(). So I want know if there is another way to fix this error.
Anybody can help me?
I think you had situation like,map widget get added to a panel having width and height greater than width and height of map widget.
When I am adding a Google Map marker using this tutorial, I am able to add my own content into the body of the marker. Instead of adding my own content, I want to use the content that Google has stored about my business. I am wondering how would I be able to do this?
As far as I know, there is no way to have Google populate the marker for you. On my site I use the Google Places API to display info on the tooltip when a marker is clicked.
You can query the places API to using the Google reference number. Here's a direct link to the Google PlaceDetailsRequest section. Scroll down and you will see the PlaceResult object which gives you all the data Google has about that particular place.
If you just want to display the information for your business, you are better off statically putting the content into the marker. Otherwise, if the data needs to be dynamic you need to pull it from somewhere yourself and Google Places is good if you don't have your own data.
I am making an application with google maps.
When markers are overlapping only the last one is displayed even if the icons are different..
I do not want it to cluster in that case, rather it should show both maybe by changing the coordinates just a but??
Any solutions??
I think this is a pretty elegant solution, called Spiderfying the markers.
https://github.com/jawj/OverlappingMarkerSpiderfier
I'm thinking of using it.
What I do now is use JavaScript to make a fancy popup that hides and shows divs on one marker location (created problematically in PHP, but you could do it on JS too). It has the side benefit of allowing less markers on the map.
Click a black numbered marker on this map to see it in action.
http://www.yourmapper.com/map/111/crime-reports/crime-in-metro-louisville-ky-since-jan-2003.htm
Another option is to use Google Maps API 3 Utility Library, it has a Marker Clusterer.