I am putting together a clients contact us page and I need to have two Google maps on it.
The first map is a small version of the second. The second map opens up in a lightbox activated by a link beneath the first.
The issue is, the large map goes wrong when I attempt to open it. I typically get one tile in the top left hand corner and nothing more.
You can see for yourself at http://test2omniforce.co.uk/node/8. It's some kind of conflict between the two because if I remove the small map, the larger map works fine.
I am trying to determine why this happens, and how I can fix it.
OS: Here's my code for the large map (the small map code is exactly the same except instead of map_canvas, it uses map_canvas2).
var myLatlng = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'we are right here ...'
});
var myLatlng2 = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
Inspired by #rggardner's suggestion, I made the small map a static map. I had no idea those existed before.
That removes the conflict and the large map now plays nice.
#rggardner, thank you very much!
Related
I am using KML layers in Google Maps. And when I load a layer into a map, it shows up in every world as far as you keep horizontally scrolling. For layers with content on a quite small area that doesn't pose a problem, as the map will automatically zoom to show only the relevant content from the layer. But for layers that show markers across the whole world, having them repeat again on the next world, it looks like a bunch of gibberish.
Take for example this sample code from Google Maps, but with a layer of Holocene volcanoes instead of their layer provided by default. If you want to see all of them, you see more than all of them, and you have no reference for when you've come to the place where they are repeating the ones you've already looked at.
Example: http://jsfiddle.net/eppptn2x/
Code:
var map;
var elevator;
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 0)
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
var markers = [];
var georssLayer = new google.maps.KmlLayer({
url: 'http://www.volcano.si.edu/ge/GVPWorldVolcanoes.kml'
});
georssLayer.setMap(map);
How do I prevent this behavior? How do I make all layer content, and any markers, be limited to only one world?
I hope I understood your question. Try entering a value for minZOom in mapOptions like this:
var myOptions = {
zoom: 2,
minZoom:2,
center: new google.maps.LatLng(10, 0)
};
I know it's too late but may be it would be useful for someone.
To prevent repeating markers you can set optimized option to false
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!',
optimized: false
});
You can find related topic here.
I've included a google map on my webpage with a marker at the location. What I want to add is an existing infoWindow of that location when the page loads.
This is the code i have:
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(51.257195, 3.716563),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
new google.maps.Marker({
position: new google.maps.LatLng(51.257195, 3.716563),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
screenshot: http://puu.sh/gMtoB/16312f42b7.jpg
Now the "AXA..." is an existing point of interest on google maps, how would i go about that my marker is actually 'linked' to that existing point of interest with the infowindow opened by default.
in short: i would like a marker on that location with the infowindow opened when the webpage loads.
I think the solution would be to first find the place_id and then add your marker using the place ID you found rather than using longitude and latitude.
I created a live demo here:
https://jsfiddle.net/qzo41qzd/
There is also an example in the documentation about placing a marker on the google map using place_id:
https://developers.google.com/maps/documentation/javascript/places#placeid
The Google map on my site no longer shows up. I can see the zoom in/out slider, map/satellite buttons, etc... but the map itself no longer shows up. I read somewhere that the map should be in a div tag labeled "map" with both height and width stated in the CSS. The map has always had height/width CSS properties listed, but the ID was labeled differently. I changed the ID to map and corresponding CSS, but the map still will not show up. I read elsewhere that the Google Analytics by Yoast plugin was also causing similar errors. I have disabled all plugins and then one at a time I have reactivated them to see if another plugin might be the issue. However, it seems that none of the plugins running have any effect on the map displaying.
I am a web designer with some HTML/CSS knowledge. I designed this site and had hired a guy to code it into a custom Wordpress theme for me. Like I said, the map had been showing just fine, but no longer does and I have no idea why. I could really use some help to figure this out. I'm trying to learn more about coding so in the future I can debug and fix things like this on my own. A little help would be greatly appreciated!
Here is a link to the page with the map: http://seegerlaw.com/contact-us/
Please let me know if you need any other information from me.
You're using undocumented fields:
function initialize() {
geocoder = new google.maps.Geocoder();
codeAddr(function(lat, lng) {
myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {
zoom: 15,
center: myLatlng,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
});
}
function codeAddr(callback) {
if (geocoder) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].geometry);
maps_lat = results[0].geometry.location["kb"];
maps_lng = results[0].geometry.location["lb"];
callback(maps_lat, maps_lng);
}
else {
console.log("Geocoding failed: " + status);
}
});
}
}
Use the lat() and lng() properties of LatLng to get their values.
Even better, just pass in the LatLng directly from the Geocoder to the MapOptions object:
codeAddr(function(latLng) {
var mapOptions = {
center: latLng,
...
};
...
});
callback(results[0].geometry.location);
Even better – it appears that you always geocode the same address – just hardcode the LatLng into your code.
Not sure if this is possible but I have set my map up with custom styles and marker and I want to ensure the map shows at this level but with London in view. To do so I centred the map at a different location to my marker. I would like the map to zoom to my location if possible instead of the centre.
var myLatlng = new google.maps.LatLng('51.4525368','0.2481994');
var mapOptions = {
center: new google.maps.LatLng('51.4600368','0.0781994'),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 11,
mapTypeControl: false,
scrollwheel:false
};
Also if anybody can tell me why my info window is displaying all funky I would appreciate too.
It has been tough to understand your question but if I got you right, you are trying to fit both center of London and your location on the map without setting a center on some position on the map. If that's correct, then you need google.maps.LatLngBounds() to get it done.
var bounds= new google.maps.LatLngBounds();
var London= new google.maps.LatLng(//London values);
var myLatLng = new google.maps.LatLng(//your values);
bounds.extend(London);
bounds.extend(myLatLng);
map.fitBounds(bounds);
Check if this serves your purpose.
My Google Map only shows up fine the first time. Clicking the line a second time or more, the map does not re-draw properly and so is unusable.
I am using the following code:
var myLatlng = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'we are right here ...'
});
var myLatlng2 = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
google.maps.event.trigger(map, 'resize');
With google.maps.event.trigger(map, 'resize') at the end being my attempt to get the map to behave correctly.
You can see the effect at http://test2omniforce.co.uk/node/8 and clicking on the map image.
It doesn't look like a width and height are set on your div with id 'map_canvas' in map.php. I wonder if this is causing the map to not render correctly?
Maybe try adding some dimensions and see if that works.
Good luck!