For as long as I can remember, the street view pegman has appeared on my map. Today, I noticed that he doesn't appear (although if you know where to mouse over to grab him, you can still get a streetview happening). My zoom control has similarly disappeared (but is still there if you know where to mouse for it) but not on mobile devices where it seems to display just fine.
My first guess is that this is a bug in the Maps API that's been introduced recently. But specifying v=3.4 in the URL for the API doesn't correct the issue.
Am I doing something wrong? If not, is there a workaround?
Here's how I create the map:
<script type="text/javascript">
var lat=<?php echo $lat; ?>;
var lon=<?php echo $lon; ?>;
var initialZoom=<?php echo $initialZoom; ?>;
var mapTypeId = 'Custom Map';
var mapStyle = [{featureType:"administrative", elementType:"all", stylers:[{hue:"#dae6c3"},{saturation:22},{lightness:-5}]},
{featureType:"landscape", elementType:"all", stylers:[{hue:"#dae6c3"},{saturation:16},{lightness:-7}]},
{featureType:"road", elementType:"geometry", stylers:[{hue:"#ffffff"},{saturation:-100},{lightness:100}]}];
var styledMap = new google.maps.StyledMapType(mapStyle);
var mapType = new google.maps.ImageMapType({
tileSize: new google.maps.Size(256,256),
getTileUrl: function(coord,zoom) {
return "img/tiles/"+zoom+"/"+coord.x+"/"+coord.y+".png";
}
});
var map = new google.maps.Map(document.getElementById("map_canvas"),
{center:new google.maps.LatLng(lat,lon),
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:initialZoom,
mapTypeControl:false});
map.overlayMapTypes.insertAt(0, mapType);
map.mapTypes.set(mapTypeId, styledMap);
map.setMapTypeId(mapTypeId);
</script>
I had recently added this CSS rule which was causing the problem:
img {
max-width: 100%;
}
Removing that rule fixed the problem.
Related
I'm writing a Wordpress page for a client that displays some text and a Google Map based on data loaded from a database.
So far I've gotten most of it to work. The Google Maps however begins to load then mysteriously "blues" out displaying only what looks like ocean with all the other options (zoom in/out, street view, etc.) greyed out.
There are no JavaScript errors available from FireBug etc.
The divs containing the map (#container, and #map-canvas ) are set to real pixel values.
The solution given here yields no positive results.
This is what the end result looks like:
Any ideas would be extremely welcome.
Edit:
Code snip per request:
echo '<script>function initialize(e,t,n){e=parseFloat(e);t=parseFloat(t);var r=new google.maps.LatLng(e,t);var i;var s;var o={center:r,zoom:14,mapTypeId:google.maps.MapTypeId.ROADMAP};s=new google.maps.Map(document.getElementById("map-canvas"),o);i=new google.maps.Marker({map:s,draggable:false,animation:google.maps.Animation.DROP,position:r,title:n});google.maps.event.addDomListener(window,"load",initialize)}jQuery(function($){initialize("'.$detail['latitude'].'","'.$detail['longitude'].'","'.$detail['name'].'")})</script>';
echo '
<div id="container" style="height:500px;width:500px;">
<div id="information">
<h2>'.$detail['name'].'</h2>
<p>'.$detail['description'].'</p>
<p>'.$detail['address'].'</p>
</div>
<div id="map-canvas" style="width:300px;height:200px;">
</div>
</div>
';
Un-minified version of the JS:
function initialize(lat,lng,name) {
lat = parseFloat(lat);
lng = parseFloat(lng);
var ourLocation = new google.maps.LatLng(lat,lng);
var marker;
var map;
var mapOptions = {
center: ourLocation,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
marker = new google.maps.Marker({
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
position: ourLocation,
title:name
});
google.maps.event.addDomListener(window,"load",initialize);
};
jQuery(function($){
initialize(lat,lng,name);
// the variables lat, lng, and name are replaced with php variables in the code
});
I figured it out. Took a little while, but...
Wordpress hates the jQuery call for some reason or another.
I noticed that in the JS console, if I called the initialize function with the variables I'd rip from the generated source then the map would magically work.
Instead of using jQuery, I just used the windows onload event.
window.onload = function() { initialize('.$detail['latitude'].','.$detail['longitude'].',"'.$detail['name'].'"); }
Which magically works.
Lesson learned, jQuery and Wordpress are like Strawberry Chocolate Milk and India Pale Ales: they don't mix well.
Thank you everyone that contributed.
I am successful to display multiple maps through a php loop. But at the end I am calling window.print. My problem is that the window.print is getting triggered before the map loads and blank space is shown on the print page.
Here is my example code:
{loop starts}
<div latitude="<?php echo $row['lat'];?>" longitude="<?php echo $row['lng'];?>" zoom="<?php echo $row['map_zoom_level'];?>" class="map_canvas"></div>
{loop ends}
Javascript:
$(document).ready(function(){
$('.map_canvas').each(function(index, Element) {
var lat = $(Element).attr('latitude');
var lng = $(Element).attr('longitude');
var latlng = lat+','+lng;
var zoomlevel = parseInt($(Element).attr('zoom'));
var origin = new google.maps.LatLng(lat,lng)
$(Element).gmap({'zoom': zoomlevel}).bind('init', function(ev, map) {
$(Element).gmap('get','map').setOptions({'center':origin});
$(Element).gmap('addMarker', {'position': latlng}).click();
});
});
window.print();
});
Can anyone help me fix this.
I'm looking to simply add a google map using google maps api to one of my pages in WordPress. Is there a simple way of simply copy and pasting the "Hello, World" google maps code somewhere to have the map displayed on a page?
thanks
Yes, there's no need for a plugin for something like this. First of all you would include the Google maps script in header.php or you could enqueue it;
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
Then I normally add the following in header.php - this adds conditional code to the tag for the page containing the map only (in this case page 374);
<body <?php if (is_page(374)) { echo 'onload="initialize()" onunload="GUnload()"'; } ?>>
And then I would create a custom template for the contact page (as that's the page the map is normally on) and in the template for that page include something like the following. Yes, it's probably a bit long for a code sample but I'm just giving you a real example which contains an animated marker which can be clicked on to show your client's address. You could change the inline dimensions to suit your design, and you can also offset the map so the marker isn't right smack in the middle of it.
<div id="contact-content">
<script type="text/javascript">
function initialize() {
var leeds = new google.maps.LatLng(53.80583, -1.548903);
var firstLatlng = new google.maps.LatLng(53.80583, -1.548903);
var firstOptions = {
zoom: 16,
center: firstLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_leeds"), firstOptions);
firstmarker = new google.maps.Marker({
map:map,
draggable:false,
animation: google.maps.Animation.DROP,
title: 'Your Client',
position: leeds
});
var contentString1 = '<p>The Address<br />Of your client<br />in<br />here</p>';
var infowindow1 = new google.maps.InfoWindow({
content: contentString1
});
google.maps.event.addListener(firstmarker, 'click', function() {
infowindow1.open(map,firstmarker);
});
}
</script>
<div class="map">
<div id="map_leeds" style="width: 600px; height: 600px"></div>
</div>
</div>
If anyone else does it a different, better way then I'd be keen to see it, but I've used this on loads of sites and it works really well.
I have a google map embedded in a site that loads a kml file at https://www.getstable.org/who-can-help/therapist-map-kml using KmlLayer. Sometimes the map doesn't load up, I presume because google maps has a strict timeout, and often some of the pins on the map aren't clickable but some are with no clear reason why. Does anyone know what the timeout limit is on kmlLayer and how to increase it? Also is there any reason why sometimes some of the pins aren't clickable (ie no InfoWindow appears when you click a pin and the cursor doesn't change to a hand)?
Here's the code that shows it (some of the fields are templated):
<div id="map_canvas" style="width: 856px;height: 540px;">Loading...</div>
<script type="text/javascript" src="{protocol}://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var the_map = {
options : {
zoom:{embed:zoom_level},
center:new google.maps.LatLng({embed:latitude},{embed:longitude}),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
geocoder : null,
map : null,
init : function() {
this.geocoder = new google.maps.Geocoder();
$('#map_canvas').delegate('a', 'click', function(event) {
window.location.href=$(this).attr('href');
return false;
});
},
load_map : function() {
this.map = new google.maps.Map(document.getElementById("map_canvas"), this.options);
query = encodeURI('{site_url}{embed:map_url}');
var ctaLayer = new google.maps.KmlLayer(query,{
preserveViewport:true
});
ctaLayer.setMap(this.map);
}
}
$(document).ready(function() {
the_map.init();
the_map.load_map();
});
</script>
The Google Servers have an unspecified timeout, but testing shows it to be 3-5 seconds. This timeout is not something you can affect. The solution is to make your server respond faster. This issue almost always comes down to a file that is too big (yours isn't) or from dynamically generating the KML. You need to optimize this and that may mean finding a way to create a static KML file.
Features that are not clickable are almost certainly a problem with your KML. You can validate your KML to check for this:
Feed Validator
KML Validator
You can also test your KML by loading it at maps.google.com.
I wonder whether someone may be able to help me please.
I've put some coding together (please see below) whereby a user goes onto a HTML form, they type in an address and click a 'Search' button. Upon doing this, the location is plotted on the Google map and the Lat and Long co-oridnates are automatically entered into the associated text boxes on my form.
What I would like to do, if at all possible, is for the marker to be draggable so the user can fine tune the location, and as they drag the marker, I'd like for the Lat and Long fields to change their
associated co-ordinates.
In addition, I'd also like, if at all possible, to have a field on the form called 'NearestAddress' to show the nearest address to where the marker has been dragged to.
I've managed to make the markers draggable but they don't update the Latitude and Longitude text boxes. I'm also unsure how to add the functionality to show the updated address to where the marker has been dragged to.
(function() {
// Defining some global variables
var map, geocoder, myMarker, infowindow;
window.onload = function() {
// Creating a new map
var options = {
zoom: 3,
center: new google.maps.LatLng(55.378051,-3.435973),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
// Getting a reference to the HTML form
var form = document.getElementById('LocationSearchForm');
// Catching the forms submit event
form.onsubmit = function() {
// Getting the address from the text input
var address = document.getElementById('Address').value;
// Making the Geocoder call
getCoordinates(address);
// Preventing the form from doing a page submit
return false;
}
}
// Create a function the will return the coordinates for the address
function getCoordinates(address) {
// Check to see if we already have a geocoded object. If not we create one
if(!geocoder) {
geocoder = new google.maps.Geocoder();
}
// Creating a GeocoderRequest object
var geocoderRequest = {
address: address
}
// Making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {
// Check if status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// Center the map on the returned location
map.setCenter(results[0].geometry.location);
// Creating a new marker and adding it to the map
var myMarker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable:true
});
document.getElementById('Latitude').value= results[0].geometry.location.lat();
document.getElementById('Longitude').value= results[0].geometry.location.lng();
google.maps.event.addListener(myMarker, 'dragend', function(evt){
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function(evt){
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
}
});
}
})();
I am new to Google maps development and I'm not even sure whether it's possible to achieve what I want. I've been working on this now for a few weeks and it's driving me a little crazy, so if someone could perhaps point me in the right direction it would gratefully be received.
Many thanks and kind regards
Chris
Instead of evt.latLng.lat().toFixed(3) you should just use the myMarker object and grab it's position.
Getting the nearest address is not that easy, but requires reverse geocoding, and to be honest I don't see the point in doing it. You would have to make special cases for the occurences where there couldn't be found a closest address and stuff like that.
If you really want to do it though there is a webservice you can call to do it.