I have page that displays multiple Google Maps on one page. On the maps I have my logo in the top left. I have noticed it only displays on the first map. I have an idea why but I am not sure what I need to add for it to display on the other. It inherits all the other map controls so I not sure why it doesn't do this for the logo on both maps.
Here is a link to the page
EXAMPLE
Here is the link to the code for the map
CODE
Any suggestions?
-Thanks
Looks to me like you are only adding it to "map":
map.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);
if you want it on map1, you need to add it to there as well:
map1.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);
(you might need to make another copy for map1)
Related
I had a quick search for this problem and couldn't find anything that satisfied both parts so I hope this is ok to ask:
I am creating an interactive map which has an aerial image of a location as a background, with small icons overlayed over the top. These icons, when clicked should open a popup window with images or videos that have been taken in those locations, much like a google map.
I have found code to allow me to layer images over each other here:
Html Image over image
And I have found code for a popup here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
And I can get both of these elements to work separately on my webpage, however I'm stuck as to how to combine them so that the image I have overlayed can be clicked on to trigger a popup.
It's been a while since I have coded in HTML and I can usually handle these kind of challenges but I'm finding myself a bit out of my element here.
Thanks!
The URL for previous implementations of photosphere panoramas contained the pano ID, making it easy to embed a specific panorama in an iframe. I can't seem to track down ID in the new Google Maps. Is there any method of identifying the ID for a photosphere without resorting to Javascript?
I can find the ID two times. Here is an example:
www.google.de/maps/place/Magdeburg/#52.1285424,11.6312738,3a,75y,98h,90t/data=!3m8!1e1!3m6!1s_k_6ZCbrOuYAAAQo8TPM1w!2e0!3e2!6s%2F%2Fgeo3.ggpht.com%2Fcbk%3Fpanoid%3D_k_6ZCbrOuYAAAQo8TPM1w%26output%3Dthumbnail%26cb_client%3Dmaps_sv.tactile.gps%26thumb%3D2%26w%3D203%26h%3D100%26yaw%3D98.389519%26pitch%3D0!7i13312!8i6656!4m2!3m1!1s0x47a5f5ff55daea5b:0x4236659f8071060!6m1!1e1
I got the URL by clicking hte yellow guy (at hte bottom right) once and click one of the orange panorama spots
You can take help of chrome or other browser DOM inspect tools.
Open your photosphere link/url in chrome.
You will see gallery of thumbnails at bottom, your panorama will be one of them with the 360 icon
Right click on that thumbnail and click "inspect", and the dom inspector will open
Keep expanding the DOM tree untill you reach this DIV with class="widget-runway-card-background-flicker-hack-wrapper"
You will see an image element inside, copy its image url. This is same as the photosphere thumbnail you are viewing in the gallery
The url will be one of the following format (these are dummy)
Case A:
https://lh4.googleusercontent.com/-HXKCf8vxJ-s/Ve_c7LX8HyI/XXXXXAAxtg/J4tLscU2d6g/w203-h101-n-k-no/
Case B:
https://geo0.ggpht.com/cbk?cb_client=maps_sv.tactile&authuser=0&hl=nl&output=thumbnail&thumb=2&w=200&h=150&pitch=0&ll=55.2399803333%2C1.851848888888867&panoid=FEpIAbSgOzoAAAQJOQCL3w&yaw=123
For Case A: Add "F:" to the bold string and you will have the final panoID, i.e
F:-HXKCf8vxJ-s/Ve_c7LX8HyI/XXXXXAAxtg/J4tLscU2d6g
For Case B it is very obvious, FEpIAbSgOzoAAAQJOQCL3w.
Run the following from the console of developer tools while viewing the pano on Google Maps
"F:".concat(window.location.href.split("!1s")[1].split("!2e")[0]).replace('%2F','/')
Doing a big part of work around html image maps and suddenly I am not able to edit image maps:
- when clicking on an image with map edit tool, it adds the first point, but then focus is lost and 'multiple CSS p-elements' are selected, so I am not able to create any shapes, but adding single points only.
Dreamweaver can only make image maps for images with position:static
I want to add HTML tabs withdrawing current design of info window of google map. Something like this
I am going through OpenLayers API, but i am not sure how to achieve this.
Any suggestion?
I'm not sure what the programmer used to create that red Info Window in your screenshot.
However, InfoBubble is capable of creating tabs, and you can also customize its styles. Try the demos:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/
You could also use Infobox and create the HTML to make it look like your example using Twitter Bootstrap + HTML.
I did this in my site and it worked great
I want to create one webpage with one textbox, one button and one div containing the google map. My use case is whenever I enter some address in textbox and click on the button the google map for that place should get rendered in that div. Can anybody please help?
You want to use the Google Maps API:
https://developers.google.com/maps/documentation/javascript/
and either the geocoding service:
https://developers.google.com/maps/documentation/javascript/geocoding
or autocomplete:
https://developers.google.com/maps/documentation/javascript/places#places_autocomplete
The samples linked there should give you plenty of code to draw on.