The usual way of adding a new instance take a lot of time. Please help me solve this
for (var element in results) {
var marker = new google.maps.Marker({
map: map,
position: results[element],
title: element
});
google.maps.event.addListener(marker, 'click', function () {
window.open('msg', '', 'configs')
});
Use geojson format for displaying markers.
https://developers.google.com/maps/documentation/javascript/datalayer#maps_layer_data_simple-javascript
Related
I have a Goggle Map displaying markers based on a list being pulled from a database via php. It all works OK but will display a blank grey map page if one of the lng/lats are incorrect.
eg: "510.51356, -0.7015494" rather than "53.8741174, -0.7015494"
I've tried:
var myLatlng = new google.maps.LatLng(510.51356, -0.7015494);
console.log(myLatlng);
Thinking it would return an error but doesn't - it returns an object but no data - but this is the same whether the lng/lat is correct or not.
Is there a way I can stop GoogleMaps from trying to add markers with incorrect lng/lats?
Below is the full code I'm using:
var myLatlng = new google.maps.LatLng(510.51356,-0.7015494);
var markerOptions = {
map: map,
position: myLatlng,
title: “MY LOCATION TITLE”
};
marker_3744 = createMarker_map(markerOptions);
marker_3744.set("content", "<strong>MY LOCATION TITLE</strong><br /><strong>Full address in here”);
google.maps.event.addListener(marker_3744, "click", function(event) {
iw_map.setContent(this.get("content"));
iw_map.open(map, this);
});```
$('.collapse').each(function() {
var title= $(this).siblings('.accordion-heading').find('a');
$(this).on('show hide', function (e) {
if(!$(this).is(e.target))return;
title.parent().toggleClass('active', 300);
title.parent().hasClass('active') ? $('input.party').prop('value', '') : $('input.party').val(title.siblings('.delete').prop('id'));
var id = title.siblings('.delete').prop('id');
var data = {id: id};
$.post("times.php", data, function(result) {
if(title.parent().hasClass('active')){
$('.times').html('');
} else {
$('.times').html($.parseJSON(result));
}
})
})
})
So I am adding a new accordion-group to my html by adding a new party and I wan't all this to work on the newly added elements as well. I didn't find topics that could help me since it is a bit more specific than any random each function (I think).
This future elements thing is new to me, so I would appreciate some explanations or a good link to a place other that the jquery website which I already checked.
Thank you for your time!
Basically what I want to do this replace $(this).on('show hide', function (e) { with something like $(document).on('show hide', $(this), function (e) {. What I just wrote doesn't work though.
If it is just about the event handler, then you can use event delegation to capture the event on dynamically created elements as well.
There is not reason why you have to use .each here, so just omit it:
$(document.body).on('show hide', '.collapse', function() {
var title = $(this).siblings('.accordion-heading').find('a');
if(!$(this).is(e.target))return;
// rest of the code...
});
this will apply on any new objects matching selector
jQuery(document).on('show hide', '.accordion-heading a', function(event){
...
});
New to Google Maps, and not a script expert either. Thanks in advance for any help you can provide.
I am putting a google map on a page of store locations. I have managed to get the map to display the marker I want for the store location using the search. Now I want the infoWindow to be populated to look like the standard google window. But using the code I was able to find on the places library, the results show up unformatted with no line breaks, and shows errors if a piece if information is missing, etc... I have searched and didn't find anything that helped - so please forgive me if this is already answered - and I have read through the google places library numerous times so either I am dense or they just don't address this specific question.
The user will click on a store location listed on the page and I want to show them the map with the one marker (through search I think I can get that to happen) and I want the store information show up in the infoWindow when they click on the marker (preferably I would like the infoWindow already opened but I couldn't find anything on that either). Since I am new to the site I can't post an image of the infoWindow so hopefully it's not needed. Like the google's map website, I want a nicely formatted name, the reputation stars, a formatted address, phone number and website, along with a picture of the business if it exists. The example I use below is for a business where all of this information exists within google. The code I currently have for the map is included.
Please don't reply simply to direct me back to the places library; if that's all you have then it is not helping. I need some clarification and ideally an example. Thanks.
<script type="text/javascript">
var map;
var service;
var infowindow;
function initialize() {
var mvale = new google.maps.LatLng(40.708572,-74.017385);
map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mvale,
zoom: 16
});
var request = {
location: mvale,
radius: '500',
keyword: "Michelle Vale"
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name + place.rating + place.vicinity +
place.formatted_address + place.website );
infowindow.open(map, this);
});
}
function openInfoWindow(id){return true;}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I finally located some code for formatting the infoWindow in another post where they were answering a question about removing the border for the infoWindow.
Here is my example :
infowindow.setContent('<span style="padding: 0px; text-align:left" align="left"><h5>' + place.name + ' ' + place.rating
+ '</h5><p>' + place.formatted_address + '<br />' + place.formatted_phone_number + '<br />' +
'<a target="_blank" href=' + place.website + '>' + place.website + '</a></p>' ) ;
I also figured out how to use the getDetails function described in the Places Library
I still don't know how to get the rating information (I'm using the tag but it gives an error), how to retrieve the image for the location, nor how to eliminate the "undefined" error from appearing.
Last element is to have the infoWindow open when the map loads... I saw a post about it but couldn't get it to work.
I'm drawing markers on a google map after it's been panned or zoomed.
If the viewport has not totally changed than the markers that appeared before the move and should still appear after it are being painted on top of themselves again and again.
I know I have to delete all the markers from the map before the new markers are painted and I know I should be using marker.setMap(null);.
I just don't know how and where to fit it in my code.
google.maps.event.addListener(map, 'idle', showMarkers);
function showMarkers(){
// get viewport bounds
var southWestLat = map.getBounds().getSouthWest().lat();
var southWestLng = map.getBounds().getSouthWest().lng();
var northEastLat = map.getBounds().getNorthEast().lat();
var northEastLng = map.getBounds().getNorthEast().lng();
var marker;
$.ajax({
type: "POST",
url: "markers.php",
dataType: "json",
data: ({'southWestLat' : southWestLat , 'southWestLng' : southWestLng , 'northEastLat' : northEastLat , 'northEastLng' : northEastLng}),
success: function(coordinatesMap){
for (var id in coordinatesMap){
if (coordinatesMap.hasOwnProperty(id)){
marker = new google.maps.Marker({
position: new google.maps.LatLng(coordinatesMap[id].lat,coordinatesMap[id].lng),
map: map
});
}
}
}
});
}
For performance reasoning you don't want to clear all the markers; Only the ones no longer on the map. This can be accomplished by storing the marker in an array or object. On 'success' you want to check if a marker is already at the lat lng using your array/object. If so then don't add a new one, if not then add it. After you have finished processing the markers in the ajax request, remove the ones no longer visible on the map.
I'm trying to use the MVC objects in Google Maps version 3. What I can't seem to figure out is why my zoom_changed method is only invoked once. When I first load the map the zoom_changed method is invoked. But not when I zoom on the map.
function MarkerWidget (options) {
this.setValues(options);
this.set('zoom', this.map.zoom);
var marker = new google.maps.Marker({
icon : this.icon,
mouseOverIcon : this.mouseOverIcon,
orgIcon : this.orgIcon
});
marker.bindTo('map', this);
marker.bindTo('position', this);
google.maps.event.addListener(marker, 'mouseover', this.onmouseover);
google.maps.event.addListener(marker, 'mouseout', this.onmouseout);
}
MarkerWidget.prototype = new google.maps.MVCObject();
MarkerWidget.prototype.zoom_changed = function () {
$.log(this, new Date());
}
Shouldn't the map object fire the zoom event and notify all objects that has "this.set('zoom', this.map.zoom)"?
Found the solution. Se my comment on the original post.
Referenced comment below:
Found the solution, you need to specify a bindTo not set! ie. this.bindTo('zoom', this.map);