I want to put a map in a web page where users will be able to put interactive marker (location pins) as many as they want. Now, whenever a marker is placed, I want to store that specified marker's lat, long value to be saved in a database that I have in my server (phpmyadmin).
Trying to get started with Google Map Data API. Have seen lots of examples but could not find any where interactive markers can be placed.
I'm going to show you how to do it with v3 of the APi
Create your map... I'll assume you've got this part down.
Add an event listener to the map. This event listener will call a function that will create the marker (in this case add_marker). You can use any event you want, this uses the click event.
google.maps.event.addListener(this.map, 'click', add_marker);
Create the function that adds the marker to the db then the map. This will require some AJAX. You use the event.latLng to get the lat/lng
function add_marker( event ) {
lat = event.latLng.lat;
lng = event.latLng.lng;
// ajax code here that posts the lat/lng to the server
// only call the remaining code to add the marker if it was successful
var marker = new google.maps.Marker({
position: event.latLng,
map: map // put the handle of your map here
});
}
Related
I have a Google map that I am using to allow people to suggest locations. Currently I position a draggable marker in the centre of the map using a LatLng created with
myPosition = frmMap.getCenter();
What I would like to do though is place it initially somewhere to the edge of the map, perhaps directly under the zoom control (not unlike the way you see the yellow street view man above the zoom control).
I've searched for a solution but am not coming up with anything. My only idea was to do some maths based on the Center and NortEast but I'd rather have an absolute position based on pixels if that's possible?
As I mentioned in the comments, computing a latlng value for a marker to position under the zoom controls is not only cumbersome, but might not be feasible if the user starts panning/zooming around in the map (as the marker will move wherever the latlng takes it).
My suggestion would be to use the Drawing Library provided by the Maps API. This basically gives you a drawing control, to add markers to the map (other overlays are possible too: cirlce, polygon, polyline, rectangle). And like any control google maps provides, you can strictly position them anywhere you'd like - by setting it in the options. The snippet below describes how you initialize the drawing library:
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM,
drawingModes: [
google.maps.drawing.OverlayType.MARKER
]
}
});
drawingManager.setMap(map);
This gives you your drawing control, with the mode for Marker enabled, and binds it to your map object.
You can then listen to when a marker's been added by adding a listener on the drawingManager variable for the markercomplete event. Then in the call back you can get the position of the added marker, the snippet below demonstrates this:
google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
var position = marker.getPosition();
});
I put together a small jsfiddle with this example if you'd like to see it in action. Also, click here for full reference of the Drawing Library for the maps api.
EDIT: (start mode in marker add on map load, hide drawing controls after marker added, maker marker draggable)
To start the drawing mode to add marker on map load, simply set the drawingMode option in your drawingManager variable declaration:
`drawingMode : google.maps.drawing.OverlayType.MARKER`
You can hide the drawing controls in the markercomplete event listener:
// To hide:
drawingManager.setOptions({
drawingControl: false //changes UI back to regular map interactions
});
drawingManager.setDrawingMode(null); //hides controls
Alternatively, if you're never going to need the drawing controls again later in your client interactions you can remove it from the map complete via:
drawingManager.setMap(null);
Then to make the marker draggable, just set the option in the listener as well (because the marker in the callback function is a google maps marker object anyway - which references the marker that's added to your map).
marker.setOptions({
draggable: true
});
You can then add a listener on the marker object for the dragend event to track changes to the location.
Here's in updated fiddle: http://jsfiddle.net/svigna/J5zMg/3/
Question is simple. On page load I have map without pins. There are control on map that enable to user to place pins on map. Sometimes number of pins that need to be placed are over 2000 and this is process that need time. My question about this is there any google map event similar to jQuery document.ready that could wait until all map pins are placed on map. I need to display loading overlay until all pins are placed on map and after that hide it.
Just like function for map
window.google.maps.event.addListener(map, 'idle', function () {
// do something
});
I try with idle but if map don't change zoom this event is not executed(this situation is possible when you add pins on map).
To answer your question, no there is no google maps event for when all your pins are placed. However you do not need one. Just write your code so that it does these actions in this order when you load your pins:
apply your loading overlay
loop through the creation of all your pins and add them to the map
remove you loading overlay
If code helps you more:
function loadMyPins(pinDataCollection){
addMyOverlay();
for(var i=0; i<pinDataCollection.length; i++){
//create new pin
}
removeMyOverlay();
}
I am working on a prototype bike parking map for my school using Google Maps API.
I have saved all the bike rack locations in MYSQL with only attributes being lattitude
and longitude of the location. Now I'm trying to add a feature where when the users click
on the markers, they would show the pictures of the corresponding bike racks.
I am trying to do this using InfoWindow object.
Now the problem is, although InfoWindow is almost exclusively used with Markers, a Marker object cannot have an InfoWindow object as one of its properties/attributes.
So I was thinking creating a fresh new InfoWindow every time users click on markers. But i feel like it's going to create some lagging.
Another option I had in mind was creating another table or a column in the current table
which contains all the InfoWindow object.
However, I really want to make the InfoWindow objects to be part of Marker objects because
intuitively it makes the most sense.
Not saying the best way to do it is this, but a marker object sure can have an infoWindow as one of it's properties! Google's API doesn't restrict/throw errors when you put random properties/methods on it's marker objects. The following is perfectly valid code:
var someMarker = new google.maps.Marker(properties);
someMarker.infoWindow = new google.maps.InfoWindow(properties);
someMarker.infoWindow.setMap(map);
someMarker.infoWindow.open();
That being said, on a lot of google maps implantations there's generally only a single infoWindow object on the map. The reason for this if you opened up 4 or 5 infoWindows in a single map view, they tend to clutter up the map and you can't see any of the base map tiles anymore.
For that reason, you can have a single infoWindow object, and just change the contents of it, depending on which marker is clicked:
var yourGlobalInfoWindow = new google.map.InfoWindow(properties);
var someMarkerA = new google.maps.Marker(properties);
var someMarkerB = new google.maps.Marker(properties);
someMarkerA.infoWindowContent = 'some A HTML content here';
someMarkerB.infoWindowContent = 'some B HTML content here';
google.maps.event.addListener(someMarkerA,'click',function() { yourGlobalInfoWindow.setContent(someMarkerA.infoWindowContent); });
google.maps.event.addListener(someMarkerB,'click',function() { yourGlobalInfoWindow.setContent(someMarkerB.infoWindowContent); });
Note that the code above is for illustrative purposes only and is far from optimized or elegant, but it gets the point across.
See related question: google maps custom local search / search control
I know I can create Custom Locations and Information Windows in a Google Map
e.g. http://code.google.com/apis/ajax/playground/#info_windows_sharing_v3
And I understand that Local Search can find near-by places (public ones)
e.g. http://code.google.com/apis/ajax/playground/#localsearch_with_markers
However my question is simple: how do I combine both?
How do I enable the same as the local/places search functionality but only on custom marker locations (e.g. my own location data rather than Google's places/local data)?
For example, if I have a set of custom location data/markers (not published to Google Places), how to allow the user to find a list of near by custom places relative to an address or his/her current location?
The Local Search API is deprecated, so you should probably look into moving to the Places API.
In either case, all you need to do is query the (Search or) Places API, extract LatLngs from the results and place your markers on the map.
I'm not sure what you mean with custom markers, I'd guess either (a) using each result's own icon as the marker's icon or (b) let users search among your data (markers) instead of Google's Local/Places.
(a) is kinda easy with the Places Library. In the place-search.html example you'd add just one line to the createMarker() callback function:
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
icon: place.icon,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
Original icons looks big though, so you may want to scale them down.
(b) would be a different story, like Creating a Store Locator with PHP, MySQL & Google Maps.
I have many map markers with the exact same lat/long cords so no matter how far in I zoom my map still shows the marker cluster and the number of results.
Is there a way to have some onclick or onhover event so that it shows an info box with all of the markers in that cluster in a list? Then clicking a link within that info box opens up that individual marker info box?
I've read solutions to change the lat, long by a small amount so that they aren't the same location. I think that is very messy and not that good anyways if there ends up being multiple markers 10+ anyways at the same locationg. I think it'd be much easier for a user to just click the cluster and bring up the info window with all of those markers in there with links.
Or if someone knows another plugin that does what I am seeking I could work with that too. I just haven't found much info on it.
There might be a plug in out there to do what you want, but it's also possible to do without one. I did something like that in one of my projects.
Add event listener to each marker; clicking opens marker list info window
The content of the marker list info window contains onclick attributes that will open the marker info window.
My code was tucked away into functions, but it was basically just this:
//1) while creating marker, create click listener that opens the marker list
google.maps.event.addListener(marker, 'click', function() {
markerWindow.close();
markerList.open(map, marker);
});
//2) store the content required by the marker's info windows
var markers = [
[marker1Reference, "The Stadium"],
[maerker2Reference, "The Supermarket"]
];
//3) the function that is called each time a marker is chosen from the marker list
function openMarkerInfo(markerIndex) {
markerList.close();
markerWindow.setContent(markers[markerIndex][1]);
markerWindow.open(map, markers[markerIndex][0]);
}
//4) info window for the marker list - the content includes JS onclick events that will open each marker info window
markerList = new google.maps.InfoWindow({
content: "Choose:<br><br><div href='' class='markerLink' onclick='openMarkerInfo(0)'>The Stadium</div><br><div href='' class='markerLink' onclick='openMarkerInfo(1)'>My House</div>"
});
//5) the marker window that will get set each time a marker is clicked in the list
markerWindow = new google.maps.InfoWindow();
Hope that helps!