What I do is I go to a location in Google Maps (either by searching or just by dragging the map). Now I enter another URL in the addressbar and hit return to go to that site.
When I use the browser Back-Button, google Maps automatically switches back to the location I was last in.
How is this done if I dragged the map and didn't use some kind of "POST" on the Google Maps site? I would like to have the same behaviour in my own google Google Maps App.
I'm using Google Maps API for JavaScript v3
I don't know if GMaps has convenience method for this, but generally such functionality is based on HTML5 history.pushState() which lets you add custom steps to navigation history and observe when user navigates back:
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
If you want to handle more advanced application states this way, there are several frameworks built on top of it, e.g. Backbone router, LeviRoutes.
In HTML4 browsers pushState can be emulated with fragment identifiers (hash URLs).
First of all you just look for an event called 'dragend' on your map
google.maps.event.addListener(map, 'dragend', function() {
});
Then you need to get your coordinates using getCenter() and redirect your browser to '#coordinates' it won't reload your window as you use hash, but it will save it in history.
coords = map.getCenter();
window.location = '#' + encodeURI(coords);
Now you need to add listener to check for any 'hash' changes in an URL (assuming you have jQuery)
$(window).bind('hashchange', function () {
var hash = window.location.hash.slice(1);
});
At the end you need to tell your map to change coordinates and decode url
hash = decodeURL(hash);
map.panTo(hash);
Instead of panTo() you could use setCenter(), but it add some nice animation while clicking Back button.
It is very easy to change this code to work with your searched place, you can use event 'center_changed' instead of 'dragend' and it will handle everything.
Everything I wrote about is covered here:
https://developers.google.com/maps/documentation/javascript/reference#Map
Hope this helps you.
Related
I am working with Google Maps API V3. The googlemaps displays markers for some places/location by default, I need to capture the click event when one of them is clicked..
I have tried to use the click event of the map but it not works because the user is clicking the marker not the map, code is given:
google.maps.event.addListener(mymap, 'click', function () {
alert('clicked');
});
Can someone give me an idea how to do it?
EDIT:
I can find no suitable Event in the available Events, which can help me!
Please note that I am not talking about the custom Markers (Created by User), these are default markers, googlemaps displays them by default.
Here's a clean solution straight from Google:
https://developers.google.com/maps/documentation/javascript/examples/event-poi
You can easily customize the default infowindow for POI's. Just ignore the route-making feature of the tutorial.
I have never tried it but could you retrieve the list of places that Google has displayed using the Google Places API and then establish your own pins and click events for them?
It's a bit hacky, and doesn't work on IE < 9, but you can listen on dom event,
to detect the creation of the window, using
Mutation Observer
Here is a plunkr to demonstrate : http://plnkr.co/edit/pGep9OZFligLhRtHlhgk
You can check in the console, an event is fired (actually twice) when you click on a POI.
Note that the OP is asking about doing this using the GMAP3 library, which is a jQuery plugin library that adds an API layer on top of the Google Maps layer. it is absolutely correct to say that the Google API is to use google.maps.addListener, but I think that the OP wants something that's closer to the GMAP3 example using addMarkers, but listening to the click event. With that in mind, I modified the example from GMAP3 and changed the mouseenter event to the click event and got rid of the mouseleave event.
Refer
is it possible to activate the keyboard bindings of Google Maps (StreetView) immediately after page load? I found a working example here, unfortunately it uses the Google Maps API v2 which is no longer supported. If you embed a normal Google Maps StreetView, keyboard bindings works not before you click on the map initially (see here).
Is there a possibility to do this in v3? I already tried this and this without success because thats not working for streetview.
Update: with keyboard bindings I have especially the arrow keys in mind to move around the map
Thanks
Greetings
Ok, found a solution and created a Gist for that.
The solution proposed by #ChristianB did not work for me. Maybe because it works for an older version of the Google Maps API (mine is v3), or it uses a different rendering mode (mine is webgl, which uses a canvas).
What I did is wait for the position_changed event to trigger, then set a tabIndex attribute on the canvas element, and then trigger the focus() on the canvas element. After that the keyboard bindings work.
The code:
var panorama = new google.maps.StreetViewPanorama({
...
//forcing webgl
mode: 'webgl'
});
//Set an event listener for position_changed,
//this will be triggered the first time the panorama is loaded,
//and every time the position changes
google.maps.event.addListener(panorama, 'position_changed', function() {
//This is how to get the canvas in my current version of the Google Maps API,
//note that this might change in the future.
var canvas = document.querySelector('canvas.widget-scene-canvas');
//first set a tabindex on the canvas,
//without it focus will not make the canvas the active element
canvas.setAttribute("tabindex", "-1");
canvas.focus();
//To test that it worked you can check that document.activeElement is the canvas
console.log(document.activeElement);
});
You might want to put the code in a separate function and call it any time the canvas loses focus.
Code tested in Google Chrome v55.
Using Google Maps on my site and when I click on the Pin It bookmarklet imported to the bookmark bar from their pinterest.com/about/goodies/ page, it picks up Google Map images.
How can I specify not to pin images found inside a div tag which contains google map widget?
I cannot individually add nopin attribute to google map images as those tags are generated dynamically by Google Maps library.
This is what I have done in my map initialize method. I am using jQuery to add the nopin tags to the images after the tiles are loaded.
google.maps.event.addListener(map, 'tilesloaded', function() {
$('#map_canvas').find('img').attr('nopin','nopin');
});
This is a slightly simpler answer that is a little more robust. I only found your answer after dealing with this myself. Just want to pass along what I learned.
google.maps.event.addListener(map, 'tilesloaded', function(){
$('div.gm-style img:not([nopin=nopin])').attr('nopin','nopin');
});
This will work regardless of your map's id, cuts out the unnecessary find(), and only runs against images that are not already marked with nopin. In this way, it won't be negatively affected regardless of how many maps you have on the page.
I am creating a custom map into MyMap link on google map for creating our own map with adding various placemark points &/or lines.
see http://maps.google.com/maps/ms?ie=UTF&msa=0&msid=
113225627012396411583.000478b8658fde4ac307b
Can I use the url getting from crated map into our application to show it programmatically with adding some points through application with javascript instead of using following url:
http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAcl
Regards,
Girish
One thing you can do is go to the MyMap and grab the URL from the "View in Google Earth" link on the bar at the top of the map.
Then you can use that URL in a GGeoXml call in the Google Maps API.
Another thing you can do is go to the MyMAp and click the "Link" link on the bar at the top of the map. If you feel like it, use the "Customize and preview embedded map" option. Then grab the displayed HTML and paste it into your website.
In both those cases the data is dynamic. Future changes to the MyMap will be reflected on your website, after a few hours delay due to caching on the Google server.
If you want more control, then you'd need to consider third party extensions to the Google Maps API, such as EGeoXml, GeoXml or GeoXml3. In which case the data would normally be static and not reflect future changes to the MyMap, but you could write your own server-side code to refresh it.
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.