I am displaying the google map using javascript api v3. I am now able to display the title on mouse over of the pin.But I want to display the details in a div on mouse over of the pin.Can anyone suggest a method for doing so?
Assuming details holds the information to display, marker is the pin to click and map is your map:
var contentDetails = "<div>" + details + "</div>"
var infowindow = new google.maps.InfoWindow( {content: contentDetails});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
Related
I am a newby at this and this question may be very simple to alot of you, but please help.
I am trying to intergrate a searchbox within a very simple google map script.
1- I successfully copied the file from here: From Info Windows to a Database: Saving User-Added Form Data
configured and it works very well!!
Now I am trying to add the searchbox functionality into the existing code.
Basically, I would like to integrate this: Place Search Box
into the previous code.
This would allow me to be able to search for places(Cities) before adding specific location to my DB.
Thanks Guys!
You can set things like this:
implement search place.
get important data (name, address, type) auto populate the info window with this data.
edit/save data in DB.
Codes:
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
Then add the custom info window from your link / tweak some values in the form, getting the result of the search place.
var html = "<table>" +
"<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Type:</td> <td><select id='type'>" +
"<option value='bar' SELECTED>bar</option>" +
"<option value='restaurant'>restaurant</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
}
Here is the list of item response from the places details.
I'm trying to make a map with google maps api, that displays a lot of markers from a MySQL Database. I did nearly everything as it is written in the Google Maps API Tutorial (https://developers.google.com/maps/articles/phpsqlajax_v3?hl=de).
My Problem:
I don't want to load all markers at once, but only those that are between the bounds of my current view.
For that my "phpsqlajax_genxml.php" gets the 4 edges of my current view as GET-variables. That works fine, but I don't know how to handle the javascript-part.
My first try was to insert a handler, that updates the map when the bounds change:
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
var swPoint = bounds.getSouthWest();
var nePoint = bounds.getNorthEast();
var swLat = swPoint.lat();
var swLng = swPoint.lng();
var neLat = nePoint.lat();
var neLng = nePoint.lng();
var qs = '&swLat=' + swLat + '&swLng=' + swLng + '&neLat=' + neLat + '&neLng=' + neLng;
downloadUrl("./includes/phpsqlajax_genxml.php?sess=<?php print session_id();
?>"+qs,function(data){
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
But that would update the map every milisecond while I'm scrolling arround the map. How may I update that only every second?
The main Problem is how to insert only the new Caches to the map and delete those that are out of my view. I have no idea how to do that.
Up to now the "DownloadUrl"-function downloads every milisecond every cache in that area and also downloads those that ones I have already downloaded, so you may see there every marker a thousand times.
May someone help me, please? :)
There may be different approaches, e.g.
always request all markers for the given bounds and remove all previously added markers
request only the markers for the given bounds that you haven't got already. Therefore you must collect the markers(e.g. the ID's) that are already drawn within the view and pass this list as parameter to the PHP-script, so that this script may use the list to filter the markers in the Query(Note: you better send the data via POST, otherwise you will reach very fast the limit for the URL-length)
Related to the removing of the markers that are not within the view:
when you really must remove the markers that are out of the view I have no better idea than iterating over all markers and removing(set the map-property to null) the markers that are not within the bounds of the map(may be determined via LatLngBounds.contains())
The other issue with the listener: you better listen for the idle-event of the map
I have this code
http://jsfiddle.net/DanielMontenegro/7pdU4/3/
Now, supose that I want to put that map in a site to allow people to report some particular event through the geocoding service. I would like to ask how could I manage to get the address/coordinates of that event in a table, and gatherall the users reports into a single database.
There is a lot of goood information about interfacing the Google Maps API v3 with PHP/MySQL in the "Articles" section of the documentation
This one looks like it answers your question; From Info Windows to a Database: Saving User-Added Form Data
See below code and try it.
I am using php static array you can connect your database and create array according your requirement. see the array below.
<?php $item = array('jaipur, rajasthan,india', 'udaipur, rajasthan,india'); ?>
Below My Code Take a look.
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyDwFjOazEAe1MI7nHV6vUwkWytOp8LH2Zk" type="text/javascript"></script>
</head>
<body onload="initialize();">
<?php $item = array('jaipur, rajasthan,india', 'udaipur, rajasthan,india'); ?>
<script>
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
var addresses = ["<?php echo implode ('","', $item); ?>"]
var geocoder = new GClientGeocoder();
//var addresses = ["A II Z, Ibn Battuta Mall, Sheikh Zayed Road, 5th Interchange, Jebel Ali Village, Dubai","A. Testoni,Dubai Festival City Mall, Ground Floor, Dubai", "Abdulla Hussain Khunji, The Dubai Mall,Downtown, Abu Dhabi"];
var curIndex = 0;
function showAddress() {
var _cur = addresses[curIndex];
geocoder.getLatLng(
_cur,
function(point) {
if (!point) {
//alert(_cur + " not found");
//map.setCenter(new GLatLng(0, 0), 6);
//map.setUIToDefault();
} else {
//console.log(_cur+":"+point);
//alert(_cur);
var cafeIcon = new GIcon(G_DEFAULT_ICON);
// Set up our GMarkerOptions object
markerOptions = { icon:cafeIcon };
map.setCenter(point, 6);
var marker = new GMarker(point, markerOptions);
map.addOverlay(marker);
var sales = new Array();
sales = _cur.split("|");
//Add click event on push pin to open info window on click of the icon
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address <br /><span class='para1' style='font-weight:normal;'>" + sales[1] + "</span></p>");
});
//Provides map,satellite,hybrid and terrain views in the map along with zoom control
map.setUIToDefault();
}
//do next after done
curIndex++;
if(curIndex<addresses.length)
showAddress();
}
);
}
showAddress();
}
}
</script>
<div id="map_canvas" style="width:100%; height:750px;"></div>
</body>
</html>
You'll need to set up an action listener of some kind (preferably a listener that will listen for a user click on the map). Then, simply geocode the resulting lat/lng and store what you receive in your table.
User clicks a point on map.
Click event grabs what lat/lng the user clicked on.
The Lat/lng is geocoded for a textual address using Ajax.
Both Lat/lng and textual address are stored side-by-side in your database table.
I have a kml file with polygon data that is too complex to load onto one googlemap as it contains thousands of latlng coordinates that just wont load all at once.
My question is, is it possible to load just one polygon when a map marker is clicked? I have a mysql database table that holds the latlngs for each marker and the table also has a column for polyCoords. I am looping through the data using php which displays all the markers correctly. Can i then add a listener to the markers which will load the data from the polyCoords column and just show the polygon for that clicked map marker?
<script type="text/javascript">
function initialize()
{
var centre = new google.maps.LatLng(34.233753,-83.828712);
var myOptions =
{
zoom: 4,
center: centre,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?php while ($row = #mysql_fetch_assoc($result))
{?>
var myLatlng = new google.maps.LatLng(<?php echo $row['lat'] . ',' . $row['lng']?>);
var marker = new google.maps.Marker
(
{
position: myLatlng,
map: map
}
);
<?php }?>
}
</script>
Thanks
Yes. Investigate AJAX.
There are some articles in the Google docs which may help: https://developers.google.com/maps/documentation/javascript/articles
Have a look at Using PHP/MySQL with Google Maps and Creating a store locator with PHP & MySQL. The latter covers getting data out of a database and updating what's shown on the map (it's markers rather a polygon boundary, but the technique is very similar).
If you run into a specific coding difficulty, ask a question about that.
I have a MySQL database where I stored some marker position (along with some other information) which I loaded into google map. I followed the example -
http://code.google.com/apis/maps/articles/phpsqlajax.html
and it worked fine for me.
Now what I want to do is, suppose a user will be able to choose an id of a specific marker and clicking on a button it will be loaded onto the map. Not sure how to load the specific marker on the map dynamically.
Any sort of help will be appreciated.
I have set up an example here. I am using the Google Geocoding API to receive co-ordinates of the address entered by the user and creating the marker using Google API V3 as shown below
Ajax Request to get the co-ordinates
$.getJSON("getjson.php?address="+address,
function(data){
lat=data.results[0].geometry.location.lat;
lng=data.results[0].geometry.location.lng;
point= new google.maps.LatLng(lat,lng);
map.setCenter(point);
zoom = 14;
marker = createMarker(point,"<h3>Marker"+(markersArray.length+1)+" "+point+"</h3>",zoom);
});
PHP Code to return the co-ordinates
<?php
$address = $_GET['address'];
$address=str_replace(" ","+",$address);
if ($address) {
$json = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.$address.
'&sensor=true');
echo $json;
}
?>
Creating the Marker
function createMarker(latlng, html,zoom) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
marker.MyZoom = zoom;
return marker;
}
First of all i see in your link that you use v2.Try to use v3 at least now that you are at the beginning since the v2 is deprecated.
As of your question i can only tell you the procedure and then you can make it happen.
1. User interaction
User interacts with UI and selects i.e. a range of prices(0-100).
2. Ajax request
The client sends an ajax request to server to get json with jquery getJson() or any other way.
3. Server Respond
A php page responds to your ajax call and make a query in mysql getting a resultset of position-markers,converts it in json and send it back.
4. Parse respond
Parse the json back to the client and create markers.
Hi I found this one great help
http://www.svennerberg.com/2012/03/adding-multiple-markers-to-google-maps-from-json/
Create a json object as given the link and pass it to javascript .
function createMarker(json){
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
}
}