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.
Related
I'm trying to get the field data from form textarea so i can store it when a user filling the textarea if he reload page or open an other page in same tab and come back to write data his previous work will be there
My code is
session_start();
$_SESSION['textarea-133'] = $_POST["textarea-133"];
?>
<script>
var a="<php echo $_SESSION['textarea-133']";
document.getElementById("business_a6").value =a ;
</script>
You could use window.sessionStorage to save a variable and check if it's there each time the page is loaded.
window.onload = function(){
var userText = sessionStorage.getItem('the_user_text');
if( userText ){
document.getElementById('the-text-area').innerHTML = userText;
}
};
It's up to you if you want to re-save the variable with each keypress or maybe after a setInterval
document.addEventListener('keypress', (event) => {
var newText = document.getElementById('the-text-area');
sessionStorage.setItem('the_user_text', newText);
});
I am using Markerclustererplus with Google Maps API v3 to ease the display of markers on the screen.
The problem is that I will have several markers in the exact same place (and it should be that way) and I would like to, when clicking on a cluster, to display an info window containing all the markers that were clustered.
I've tried several code and similar questions here in StackOverflow, unfortunately I do not master JS and couldn't solve this.
Markers are pushed into an array with some data:
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon : marker_image
});
map.markers.push(marker);
When I click an isolated marker, the info window appears ok with a title and an image of that marker:
var infowindow = new google.maps.InfoWindow({
content : $marker.attr('data-title') + '<img width="50" src="' + $marker.attr('data-image') + '">'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
What I would like to happen, is that when clicker a cluster, an info window would open with all of the markers it contains displayed with their corresponding title and image (like, reversing the clustering operation).
Thank you for the help.
Managed to solve this, thanks to the example provided in here.
If anyone is interested, here is how I've done:
First, I've added the markers to the map getting data attributes coming from several custom fields from Wordpress custom posts:
function add_marker( $marker, map ) {
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
var marker_image = $marker.attr('data-marker');
var marker_name = $marker.attr('data-title');
var marker_userpicture = $marker.attr('data-image');
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon : marker_image,
name : marker_name,
userpicture : marker_userpicture
});
map.markers.push(marker);
Created the MarkerCluster:
var markerCluster = new MarkerClusterer(map, map.markers, mcOptions);
Added a click event listener that got the markers from the cluster, their data, created the info window content from that data and finally opened the info window:
google.maps.event.addListener(markerCluster, 'click', function(cluster){
var content ='';
var clickedMarkers = cluster.getMarkers();
for (var i = 0; i < clickedMarkers.length; i++) {
if(i==0) {
var var_pos = clickedMarkers[i];
}
var clickedMarkersNames = clickedMarkers[i].name;
var clickedMarkersPicture = clickedMarkers[i].userpicture;
content +=clickedMarkersNames;
content +=clickedMarkersPicture;
}
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(content);
infowindow.open(map,var_pos);
});
I know this is a really basic question, so forgive me. I have a script that works in a jfiddle, but I want to put it in my header and I can't figure out how to call it with a script tag and event handler(?).
Here's the script:
var retrieveValue = function(ev){
var $this = $(this),
val = $this.data('value');
if (val) {
$this.val(val);
}
},
hideValue = function(ev){
var $this = $(this);
$this.data('value', $this.val());
$this.val($this.val().replace(/^\d{5}/, '*****'));
};
$('#field_a7afui').focus(retrieveValue);
$('#field_a7afui').blur(hideValue);
$('#form_hv3hcs').submit(function(ev){
ev.preventDefault();
retrieveValue.call($('#field_a7afui')[0], ev);
alert($('#field_a7afui').val());
hideValue.call($('#field_a7afui')[0], ev);
});
Can someone please tell me what I need to put at the beginning and end of this just to throw it in my Wordpress header and call it a day?
Here's my jfiddle: http://jsfiddle.net/d5KaJ/40/
If that's what you were asking for...
into a script tag like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
jQuery(function( $ ) {
// CODE HERE
} )();
</script>
What I want to acchieve (and couldn't find anything so far) is that the infoWindow is not attached to the marker. I'd like to place it on a static position in my viewport and just exchange the content based on what marker is clicked.
Q: How can I place (and not just offset) a google maps marker infowindow on a fixed location.
Answering my own Q - in case someone needs this:
// Add somewhere before creating your map to hide the info window as long as it got no content:
<script type="text/javascript">
jQuery( '#info' ).hide();
</script>
<script type="text/javascript">
function createMarker( lat, lng, whatever ) {
// map_object_name = the name of your map when you init()
html = "<strong>" + whatever + "</strong>";
var marker = new google.maps.Marker( {
map: map_object_name,
position: new google.maps.LatLng( lat, lng )
} );
// This snippet adds the content on the fly (when you click the marker)
google.maps.event.addListener( marker, 'click', function() {
// This pans the viewport/centers the marker in your viewport
map_object_name.panTo( new google.maps.LatLng( lat, lng ) );
// This shows the html-element with the id "info" and adds the html content
jQuery( '#info' ).show();
// This clears the content before you add new one
jQuery( '#info' ).empty();
jQuery( '#info' ).append( html );
// Commented out - just as reference
// infoWindow.setContent( html ); // the original infoWindow as you know it from Google Maps
// infoWindow.open( map_object_name, marker ); // the same, just the callback
} );
}
</script>
The "placing"/positioning of the #info element can than be done with normal html & css.
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.