As you can see from this jsFiddle, I have a responsive google map thanks to this stack overflow question.
Now the problem is to have the map remain centered on the marker on different viewports and browser resizes.
I have found an answer here with the following code:
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);
});
However, since I am still not very good with jQuery and javascript, I have no idea how to apply the event listener.
Does anyone know how the event listener would be applied?
I don't think your second code snippet will work in conjunction with the first as you're embedding your map using an iFrame. This means you have no access to the map to manipulate it via its API (which is what the second code snippet is attempting to do).
I'd suggest you take a look at the Google maps API 3 getting started guide which will give you all the information you need to get going. You should be able to combine the 'hello world' example with your responsive CSS and the event handler above to make the map do exactly what you want.
It's a really intuitive API and the documentation is fantastic, so I don't think you'll have any trouble. If you do run into difficulties you know exactly where to come!
Related
Probably impossible without using an API, but I'm going to ask anyway because it would save me so much pain and tears.
Is there a way to give a googlemaps marker a z-index without using the API? I've got the plug-in called Wild-Googlemaps implemented on my wordpress site. And I've created a googlemaps div, with an overlaying div set to opacity:0.7 for styling purposes.
Now I've lost the ability to click the marker, so I need to somehow change its z-index.
Anyone had this problem or has any ideas? Much appreciated.
Thanks in advance.
You cannot do that without accessing API.
By default all markers are created as a part of a map canvas and you cannot access them (they don't belong to the DOM tree). You could do that after turning off optimized parameter passed during creation of the marker (take a look at
description of marker parameters), but this require access to API.
I have a sort of setup like... google maps. It has nothing to do with maps but the mechanism seems to be similar.
I have an image ~300MB and the client can drag the picture around having different parts of it in view in the browser. I want to load only the specific parts of the image which the user is looking at, and unload the parts which are out of view (to save RAM).
I thought of breaking the image in 15X15px chunks and load the correct chunks each time but I can't seem to wrap my mind around which technique should I use to actually perform this task.
Any suggestions?
Google Maps breaks up their images (including streetview etc) into smaller chunks. I've seen a lot of people use their own images WITH the Google Maps technology to create their own maps of whatever (one, for example, is a fantasy world/web game I can remember)
Perhaps, instead of reinventing the wheel, inspect the other guys' wheel and see if you can use the same technology to create what you need. GTA for example: http://www.gta4.net/map/
This should get you started: https://developers.google.com/maps/
Google maps api: https://developers.google.com/maps/ seems to allow everything I need but it is clumsy and limited for the types of things I want to do.
It's like solving the problem backwards.. figuring out how to work with the map, and the hiding the map layer... which is... doing a lot of work for nothing.
With that, that seemed to be the best solution out there until I cam acroos this:
Panojs
http://www.dimin.net/software/panojs/
This seems to be super easy to use and quite flexible.
or Zoom.it which is based on SeaDragon which is also super easy to use!
http://www.zoom.it/
Cheers
I am trying to put a map from Openlayers 3 into a stack container which is being supplied by Dojo. But apparently there is no map being displayed until one resizes the main (browser) window.
There are no obvious errors on the Javascript console.
I made a jsfiddle: http://jsfiddle.net/q989r/
If I create the map in the same way but without all the Dojo stuff it works. I have also tried to put a distinct DIV#map for the map within DIV#center2D.
I found this similar issue: Dojo stackContainer is not displaying children until window resize but in these answers their suggestions are based on the fact that the ContentPane is created programatically which is not the case here. Anyway a
dijit.byId('view2d').startup()
nor a
dijit.byId('view2d').resize()
did not help.
So what am I probably missing? This is intended to work, right?
It appears that there is some strange logic (maybe bug) with Dojo containers that are not visible (this hint came from the Dojo IRC #neekfenwick):
Changing the order of the Applicationstack.forward() and createMap() calls did the trick. You can find an updated and working fiddle here: http://jsfiddle.net/q989r/1/
I created a simple map with two polygons (most of the code I got from the Interactive Choropleth Map tutorial). I added a L.control() to show information about the polygons in a div. Contrary to the tutorial, I would like to have this div displayed outside the map.
To get a clue what I mean please look here: jsfiddle.net/Tbr9p/
I'm pretty new to leaflet and javascript so it would be nice if anybody can help!
I think Leaflet is styling the _div you return on the event handler so it appears as a popup. Just get the DIV you want to write into (by ID, not by Class) and edit it.
See jsfiddle here:
http://jsfiddle.net/7n58L/6/
lines 103 and 110 of the JS, as well as some CSS and HTML tweaks. I think I changed some names.
see updated fiddle here
document.getElementById("information").innerText = layer.feature.properties.Name;
We want to build a google map liked javascript library to show our map data(we can not use google map or yahoo map).
We have done 60% of all the work,we can display the map tiles(img) according to user's drag operation.
Howver we found some problem:
We have a container(div element) to fill the tiles,when use drag on this container,we will do some caculatioin to see if new tiles should to be loaded.
It works. But it seems that when image are loaded,we can hardly move the mouse until imgaes are loaded completed or error.
It seems that the image load thread and the event handle thread is the same.
So any idea to fix it?
Multithreading in javascript exists, but it's still quite new. https://developer.mozilla.org/En/Using_web_workers