I've followed this tutorial to plot markers from a database on my GMaps page. I have 2 type of markers (Green: marker status on my DB equals zero; Red: marker status on my database equals one) and I need to update the marker icon everytime a change is made on DB status column. I also want to adapt this code to add markers on map everytime I got a new line on my DB. The question is that I can't refresh the entire page, I'm allowed to refresh only the markers.
Someone know a way to do this? I'm using MySQL, PHP and JavaScript on my page.
You will have to use AJAX to do this. You can load the map via AJAX, and use setInterval() to reload the map and show the changes. In this way you are not reloading the page, you can reload just the contents of a <div> with the map's contents.
Related
I've been trying to cutomize the display of Address Bing Map Location in CRM form. Instead of displaying it by default, I want it to display on modal popup. So once the user clicked on the address, the modal popup should display with the Map on it. What do you guys think is the better approach should I used? Should I just enable the Showing of Bing Maps through system configuration then hide it by default once the page is loaded, then append it to the modal once the address is clicked or just make a function that will create a bing Map? Actually I'm working on the second choice but didn't able to make it right. Here's the code I have so far, been using this through console, yes it display the Map but really dont have an Idea what credentials should I put.
`$("#address1_composite").click(function(){
alert();
var map = null;
map = new Microsoft.Maps.Map(document.getElementById('SDKmap'), null)
})
Hope that my explanation is clear enough to understand the requirement.
`
I highly recommend that you load the map ahead of time, or delay until it is first needed, but then only hide/show it using your click events. Otherwise a user code end up loading the map multiple times in a single page view which would generate lot of transactions and make it very costly very fast.
I added markers to a Google V3 map using php and MySQL, following the Google Developers instructions. The markers are spread over a large geographic area and have links to other site pages when clicked, but when the back button is used the map has re-centered to the initial latlng instead of returning to the marker coordinates.
I couldn't find any info on this issue, so was hoping someone here could tell me how to get the map to stay on the marker coordinates after clicking the link?
Bind a click event listener on your markers. https://developers.google.com/maps/documentation/javascript/reference?csw=1#Marker
On marker click, trigger an AJAX call to a PHP page with the clicked marker latitude and longitude, and the map zoom level. https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
On the PHP page, store those 3 parameters in a SESSION variable. https://php.net/manual/en/session.examples.basic.php
In your script that loads the map, trigger an AJAX call to a PHP page that will send back the SESSION variable if it exists. https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started#Step_2_.E2.80.93_Handling_the_server_response
If the pages responds with the stored variables, apply them to your map with setCenter() and setZoom() and if not, display your map at the default center and zoom level. https://developers.google.com/maps/documentation/javascript/reference?csw=1#Map
If you want an easier way to manage your AJAX calls, you can have a look at jQuery: http://api.jquery.com/jquery.ajax/
If the link takes you to another page within your site you can use a global php variable to save that location, if you're going to a different site then you'll want to store that data on the users machine with a cookie. You'll want to modify your onload function to check for cookie data, if there isn't any then have it set to the initial latlng.
Here's a tutorial on setting and retrieving data from a cookie http://www.tutorialspoint.com/javascript/javascript_cookies.htm
Update here instead of comment:
After doing some testing what I suggested will not work outright. There are three issues.
POST, while a global var is lost when going backwards so you have to use SESSION and POST. So your second page will have to have something like this at the top.
if( isset($_POST["name"]) || isset($_POST["age"]) ){
$_SESSION['name'] = $_POST['name'];
$_SESSION['age'] = $_POST['age'];
}
Your first page will need something similar but checking if $_SESSION is set then transfer the value to javascript.
<?php if( isset($_SESSION["name"]){ ?>
<script type="text/javascript">
var name = <?php echo $_SESSION["name"] ?>
</script>
<?php } ?>
Don't forget to use session_start(); and session_destroy() where appropriate.
Your second problem is browsers like to cache data when they can, and your SESSION vars won't be used when you hit the back button unless you force a refresh with JavaScript location.reload(true);
You have to wrap location.reload(true); with something so it only happens when the back button is pressed.. This is probably your best bet Track when user hits back button on the browser
I have a page that uses ArcGIS Javascript when page loads first time, map on the page loads just fine. I have a drop down box that controllers what to show on the map and ajax event handler attached to that drop down box when some other option is being selected in that drop down box function
function ajaxOnComplete() { }
gets called. How in that function do I ask ArcGIS Javascript to reload its static map?
I know there's an accepted answer here, but there is a much easier way to refresh the layer of the map. When you refresh the extent of the map, all Layers will be newly loaded.
map.setExtent(map.extent);
This just loads the existing extent again and refresh the layers. I used this to reload the map after hiding the basemaplayers.
I figured it out!
function ajaxOnComplete()
{
map.destroy();
dojo.addOnLoad(init);
}
EDIT: Just some background information - the system is set up using mySQL to store each marker's info, which is then converted into an XML file by some PHP code, which then displays it via the Maps javascript file. I currently have about 10 markers, which are stored in the mySQL database. Upon loading the map, all the markers are loaded.
I am currently using the Maps API v3 to display markers, and to display their infoWindows in a div. That's all good so far.
What I'd like to do it add a search functionality.
From what I understand, the API does have a search function, but when I tried it on the example in the documentation, it did a search across the whole map. I want it to only search amongst my markers.
EDIT: As I mentioned in the EDIT at the top, all markers are displayed at the initialize() - therefore, when someone searches for a location, the closest match would be selected. In the case of my map, the infowindow is displayed and split across 2 'html' sections, outside the map area (i.e., there is no bubble display on the actual map)
EDIT: Initially, I was worried that someone would come along and copy my idea if I posted the URL, but I'm sure it's been done already! Scr*w it - CityMap Prototype
So, I guess I'd need to find/create some sort of system that searches the XML file. Initially, the user would only be able to search for locations by name. Later, I'm sure I could come up with creative uses for the search.
Can anyone point me in the right direction?
EDIT:
After posting this, I found a tutorial on W3C - PHP Example - AJAX Live Search. It searches for links from an XML file, and then displays them in the temporary search results under the bar, as you type. Does anyone know how I can link this search function to the markers?
From what I can understand, I'd need to somehow link to each marker via XML, but that's the extent to my guess.
Thanks
From my understanding the api's search functionality is not for local files but for the whole map(world), if you are doing php I would recommend for the time being utilizing the tutorial you found and then linking the search functionality to performing some sort of javacript response which would perform the action which you are looking for upon search. I am not sure what this functionality is as you already would have the markers plotted on the map from the sound of your question. Let me know if you need more on this not sure if you are in a php/ruby/asp environment. (or if you are in a truly html environment) hth
I am developing a mobile application using jQuery mobile and leaflet.
I am using ajax to fetch marker data from the server and plotting the markers on the map dynamically. I am using a $.each loop to loop through each object returned as Json from the server and to generate markers.
I am appending anchor element within each marker Popup. When the user click on the anchor element the current page will be redirected to a new page and information like lat, lon, stName and state will be passed to the next page using query string.
The code works fine it redirects the user to the new page with all the information, but the mobile browser takes a long time performing the redirect operation.
When I tried redirecting to a new page without the query string the redirect operation was quick.
Is there an efficient way to perform this redirect operation with the information on the current page?
Does anyone know why there is a time delay when the page redirect using query string?
Is there an bindClick event in leaflet?
The structure of meta_data is as below:
meta_data=[{elev:50, ll:[-90,29], name:"Baton Rouge"}, sids:[123,456,789], state:"LA"}, ...]
$.each(meta_data, function(ind, meta_obj){
marker=L.marker([meta_obj.ll[1], meta_obj.ll[0]]);
click_element='Click Here For More Data';
marker.bindPopup("<b>Station Name: </b>"+meta_obj.name+"<br />"+"<b>Station Id: </b>"+meta_obj.sids[0]+"<br />"+click_element);
marker.addTo(map);
});