Is there a way to center the pop up window (info window) on a google map iFrame to make sure that it does not get cut off?
WOuld it be easier for me to use the Google Map API instead of iFrame? If so, is there an API call that would give me the same information by default on a the infoWIndow?
Note: I have tried using Google Map API and I prefer this over using iFrame. The only downside is that I do not get the extra information that comes with using google map iFrame. It looks like I need to populate this window with HTML by myself.
Btw here's a good example of how to create a custom InfoWindow.
https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows
You can use any html such as custom headers, divs and links
And here's the Placed API with Google Maps:
https://developers.google.com/maps/documentation/javascript/places
Related
I'm fairly new to working with Google Maps API. When embedding a map you get the place and a white box in the top right hand corner with a little information on the place. However I want to use the JavaScript API and want to know is there anyway to replicate this with the JavaScript API and not the iframe embed.
Thanks.
Basically to display the information you would need to use the infoWindow, yes. You can attach an infoWindow to either a marker or directly to map co-ordinates. In depth documentation about infoWindow and detailed references can be found here.
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
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 want to make Custom Map based on Google maps APIs I am using this code to get the Bitmap image
http://maps.googleapis.com/maps/api/staticmap?zoom=18&maptype=hybrid&size=560x480&markers=loc:26.177001,32.736675&sensor=false
Now I want to scroll the map, How can I do that. in other words I want algorithm to link between coordinates and gotten image size and map zoom
Thanks a lot
You are using Static google maps api. That's mean you will get just a print of the map as an image. This is really useful when you want to show just a place in the map without download the javascript lib.
If you want use the map zoom, scrool and other things you have to use the javascript google maps api
I know I can do it with the Google Maps API, but do you know if there is a way to change the marker in an embedded Google Map?
I want to replace the default "A" button for a "B" button or the marker with just a dot in the middle.
I haven't played around with embedding Google Maps before (I generally go straight to the API for stuff like this). I tried a couple of approaches:
I figured maybe the embed syntax would be the same as the static maps api. So I grabbed a static maps URL, copied the markers param from that and tried sticking it into the iFrame URL. This didn't work so much.
I created a Google MyPlaces and customized the marker to use the one your provided. This created a Test map which had the appropriate marker icon. I then grabbed the embed code and stuck it on a test page and voila!
Actually I had the same problem but didn't use any of the methods above and thought I share:
If you only want a marker as I did but don't want to use API then simply fool google into thinking you want a route planned using the GET tags "saddr" and "daddr"
"saddr" defines your start location (post code , street name+ number, whatever)
ONLY define saddr and leave out daddr and google maps will by default still show the marker for "A" (your start location) exactly where you want it , all in iframe without API.