I want to show photos in google maps, my project looks like this:
/index.html
/photos/1.jpg
/photos/2.jpg
/photos/.....
index.html is embedded with a google maps, like this:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map"></div>
So when I open index.html in local browser, a google map would be displayed. Then I want to show photos/*.jpg on the map. How can do that?
Is there some libs help me to do that? I searched github but cannot found one.
I am not sure I completely understand the question, but if I do, then you need to do this on Google's end. Not yours. What you do, is you go to https://mapsengine.google.com/map/ and set it up how you need to. You can set it up by typing in the address of the location you want (or drop a pin) and then click on that pin. You can then choose to "Add to Map" and it saves that location. Once you have all the locations you want, you can edit them by clicking the little paint bucket icon that appears when you scroll over the locations. Unfortunately, you can only use Your icons in the Pro version which will cost you. If you want, you can then import the map with an iframe by clicking share in the upper right hand side of the screen. Set 'Who has access' to Public, and copy the link. Paste that link into an <iframe> and then change the word edit to embed. Your result should look like this <iframe src="https://mapsengine.google.com/map/embed?mid=zT7J1AkkmHFM.kQCUyqfvFqZA"></iframe> set the iframe to the way you need it to be, and you are good to go.
Related
I'm using a map embed software and have embedded the code in to my WP site (elementor pro). I'm having an issue with the link url changing on click, I'm sure it has something to do with their software. Here's the best I can explain it:
I want users to be able to click the "directions" button that loads under the map marker, and have it open on apple maps because they will redirect to google maps if user is not on iOS device - google maps links have no such function from what I can tell. This service (storepoint), by default opens everything in google maps.
I figured it would be an easy fix and I updated my "address" in the storepoint software to be -- http://maps.apple.com/?daddr=6619+West+Cross+Creek+Bend+Lane,+Fulshear+Tx -- and it seemed to have worked (in their software it correctly pinned that location on the preview map), however when I refreshed my website the button link showed up as https://www.google.com/maps/dir//%3Ca%20href%3D%22javascript%3A%3B%22%3Ehttp%3A%2F%2Fmaps.apple.com%2F%3Fdaddr%3D6619%2BWest%2BCross%2BCreek%2BBend%2BLane%2C%2BFulshear%2BTx%3C%2Fa%3E -- so basically they just added the google maps url infront of my apple maps url rendering both map links completely useless.
Somehow my link is magically changing. I'm wondering if I can use the button id and do something with JS to prevent this. I have no idea though.
If anyone comprehends my rambling and has a work around I would appreciate it.
Not sure if you've seen this one but I'm stomped so here it goes: I've partnered with google and as a requirement I placed the google adsense code on my page to be verified and able to display ads.
However, before partnering up I had a fully functioning favicon displayed on my website on all pages, posts, and my website links. Now, after partnering up, My favicon is not displaying like before. The google blogger favicon has now taken over the place of my favicon and I can't get it back no matter how I try.
Could it be the script code that I had to copy in the php and sidebar widget area?
By the way, I deleted the code from the <head> php area and that didn't work. I'm really confused. What's really weird is that the Contact page is the only page that still shows my favicon like it's supposed to show on all my pages esp homepage. Please checkout my site sve-accountingandtaxes.com to see if you can see anything looking out of place with favicon?
Thanks for your help everyone.
When I go to your homepage, I do not see the favicon displayed on the browser tab like I normally would. But when I go to https://www.sve-accountingandtaxes.com/favicon.ico I do not see a favicon displayed on the page, either. I just see a completely white page. For comparison, when I go to https://www.google.com/favicon.ico I see the image (small) in the center of the page.
Perhaps it accidentally got deleted and needs to be uploaded again.
So I want to be able to have a space that overlays content on any website with the click of a button (something that also is above everything on a web page). An example would be the Google Translate page, http://translate.google.com/translate?u=about%3Ablank&hl=en&langpair=auto|en&tbb=1&ie=UTF-8 where the frame at the top will overlay any website that is entered in the url box.
What I want to do is have a box like this overlay every webpage, like google's translate does, but have it hide with a click of a floating image, say an arrow.
The files will be locally stored on my HDD, but I don't see this being an issue.
I don't know what languages to code this in, but I assume Javascript, however, I do not know the classes to call to do this. Any advice chaps? I'm not asking for a hand out, just a point in the right direction!
It looks like you want to develop a browser extension. Look here for Chrome:
http://code.google.com/chrome/extensions/getstarted.html
There are similar ways to do it for IE, FireFox, and Safari.
It sounds like you'll either need to use frames or an iframe. They are very similar in how you interact with them (say to make them load a new page) although they are different in their implementation.
A great site for learning about frames is w3Schools:
http://w3schools.com/html/html_frames.asp
http://w3schools.com/html/html_iframe.asp
You can use JavaScript to reference the frames via its name or its ID. Ex: document.framename.src = 'hello.php' or document.getElementById('frameId').src = 'hello.php'.
One problem with using frames is that search engines don't like them. If you are using an iframe, the search engine will search your page, but still not the iframe.
As for resizing/hiding the frame/iframe, you can do that with both frames and an iframe, although the method for accomplishing it varies depending on what you use.
I have a site which offers a useful bookmark link that contains javascript only as opposed to a link to a web page. eg URL:"javascript:(function(){.....})();" The icon that appears in the bookmarks bar is the default blank paper image.
Is there a way of forcing it to have an icon of my choice, eg the favicon.ico of my site, when someone drags the link to their bookmarks bar? (eg like when your bookmark is a standatd url such as URL:"www.mysite.com")
Many thanks for you time!
jJ
Those bookmarkes are called bookmarklets, just FYI :)
And no, there is no way to set up an icon for them. This is because the browser automatically looks for the favicon on the link the bookmark is pointing to. The way it finds this favicon is by either accessing the page itself and looking at the meta data in the HTML, or alternatively by going to domain/favicon.ico
As you can see, there is no way for the browser to perform those steps on a bunch of javascript code.
I could be wrong but I believe you have to visit the site at least once via the bookmark to have it update your bookmark with the appropriate icon. You can, though, use a link element in the header and specify an alternate icon for shortcuts.
<link rel="shortcut" HREF="/shortcut.ico">
I have been using analytics software for a while, and I've been asking myself how can such software copy a webpage completely to then place it in an iframe and overlay it with images and info.
An example:
A major problem I encountered is copying the webpage.
In particular, copying the webpage the user is currently viewing! (account panel, form journeys, etc...)
I guess this could be achieved by sending the html with the usability data, but I see this as a major performance problem...
Any comments on the subject? This would be very interesting! =)
Further findings:
I discovered that sending the HTML over GET, could be made mode efficient by using client-side compression. Although I'm still not 100% convinced by this!
I think they don't actually copy the whole page for your visitors, all of what they need, is to track the mouse location (x and y coordinates) and a url of the current page being shown,
then they will make use of these information to show you all kind of information (where the user was looking, what have been clicked, ... etc).
AFAIK the google analytics "hot links" widget doesn't copy the page at all -- it just shows it in an iFrame with stuff overlaid on it. (in google analytics' case, they can also modify the page display by sending instructions to the analytics JS embedded in the page.)
The above looks like a whole different kettle of fish though -- you sure it is html and not a screenshot?