Good day,
I have concern about adding mark icon to my google map, so every time the user will click the location. the mark will place to the location itself.
i have here the illustration
This is my code for the click function
$('button#addresses').click(function(){
var address_href = $(this).val();
var commaPos = address_href.indexOf(',');
var coordinatesLat = parseFloat(address_href.substring(0, commaPos));
var coordinatesLong = parseFloat(address_href.substring(commaPos + 1, address_href.length));
var centerPoint = new google.maps.LatLng(coordinatesLat, coordinatesLong);
map.setCenter(centerPoint);
})
so if the user click the address the google map automatically change the location.
This is the code for default function of google map
var map;
function initMap() {
var myHome = { "lat" : "53.628301" , "long" : "-113.408736" };
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(myHome.lat, myHome.long),
mapTypeId: 'roadmap'
});
var geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map)
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location,
icon: '{{ asset('assets/googlemap-marker-hiflyer.png') }}'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
'Place ID: ' + place.place_id + '<br>' +
place.formatted_address + '</div>');
infowidnow.open(map, this);
});
} else {
alert('Fill the blank');
}
});
}
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var features = [
{
position: new google.maps.LatLng(53.628301, -113.408736),
type: 'info'
},
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: '{{ asset('assets/googlemap-marker-hiflyer.png') }}',
map: map
});
});
}
So the question is how to set the marker if the user click the location.
Thanks guys. I hope it will solve my problem.
Related
This question already has answers here:
Drop One Marker at time
(2 answers)
Animation of google markers on map load with timeout
(2 answers)
Closed 3 years ago.
I have some code with ajax for google marker on map. its work fine. now i want drop marker one by one instead of load all at a time.Please help me
$.ajax({
type: 'get',
url: APP_URL + '/yestoday',
data: {_token:"{{csrf_token()}}"},
success: function (data) {
debugger;
// console.log(data);
var locations = Array();
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(20.593683,78.962883),
zoom: 7,
});
jQuery.each(data , function (index, value){
var points = Array();
var point = new google.maps.LatLng(parseFloat(value.latitude),parseFloat(value.longitude));
points.push(parseFloat(value.latitude));
points.push(parseFloat(value.longitude));
points.push(value.store_name);
points.push(value.store_address);
locations.push(points);
var marker = new google.maps.Marker({
position: point,
map: map,
animation: google.maps.Animation.DROP,
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent('<div><strong>'+points[2]+'</strong><br><strong>'+points[3]+'</strong></div>');
infowindow.open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
});
},
});
you can achieve by using setTimeout function
set delayMarker = 200; // you can set here your delay time
$.ajax({
type: 'get',
url: APP_URL + '/yestoday',
data: {_token:"{{csrf_token()}}"},
success: function (data) {
var locations = Array();
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(20.593683,78.962883),
zoom: 7,
});
var delayMarker = 200;
jQuery.each(data , function (index, value){
setTimeout(function() {
var points = Array();
var point = new google.maps.LatLng(parseFloat(value.latitude),parseFloat(value.longitude));
points.push(parseFloat(value.latitude));
points.push(parseFloat(value.longitude));
points.push(value.store_name);
points.push(value.store_address);
locations.push(points);
var marker = new google.maps.Marker({
position: point,
map: map,
animation: google.maps.Animation.DROP,
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent('<div><strong>'+points[2]+'</strong><br><strong>'+points[3]+'</strong></div>');
infowindow.open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
},index * delayMarker);
});
},
});
You can use setTimeout();
You can find in the Google Maps' API documentation, a sample that will do just what you want:
https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration#try-it-yourself
function drop() {
clearMarkers();
for (var i = 0; i < neighborhoods.length; i++) {
addMarkerWithTimeout(neighborhoods[i], i * 200); // Increase this value to slower the animation or decrease it to make it faster
}
}
function addMarkerWithTimeout(position, timeout) {
window.setTimeout(function() {
markers.push(new google.maps.Marker({
position: position,
map: map,
animation: google.maps.Animation.DROP
}));
}, timeout);
}
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
I'm currently implementing google maps in my php project. I'm showing the markers according to database values. In ajax call the markers are changing. I want to show markers on google map with out refreshing the map.
function load() {
var map = new google.maps.Map(document.getElementById("offers-map"), {
center: new google.maps.LatLng(44.910398, -93.271976),
zoom: 15,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
/* var infoWindow = new google.maps.InfoWindow(); */
// Change this depending on the name of your PHP file
$.ajax({
type: "POST",
url: "logic_abstract.php",
success: function(msg){
//alert(msg);
// call the count values
countthedata(msg);
msg = jQuery.parseJSON(msg);
var len1 = Object.keys(msg).length;
if(msg =="")
{
swal("There is no data that matches your search criteria");
}
for (i=0;i<len1;i++){
var mapimgpath = msg[i].imagepath;
var type = msg[i].reason_name;
var zip = msg[i].zip;
var addr = msg[i].addr;
var repname = msg[i].repname;
var point = new google.maps.LatLng(parseFloat(msg[i].latitude), parseFloat(msg[i].longitude));
var html = "<div class='gm-style-iw'><b>" + type + "</b><br>" + repname + "<br>" + addr + " , " + zip+"</div>";
var icon='<?php echo BASE_PATH;?>/mapview/'+mapimgpath;
marker = new google.maps.Marker({ map: map, position: point,icon: icon});
bindInfoWindow(marker, map, infoWindow, html);
}
}
});
}
//create map as global
var map = new google.maps.Map(document.getElementById("offers-map"), {
center: new google.maps.LatLng(44.910398, -93.271976),
zoom: 20,
mapTypeId: 'roadmap'
});
//create global marker array
var gMarkers=[];
//global variable for length
var locationLength=0;
// call in loading time
// remove the previous markers
for(i=0; i<gMarkers.length; i++){
gMarkers[i].setMap(null);
}
gMarkers=[];//empty the global marker array
var map = new google.maps.Map(document.getElementById("offers-map"), {
center: new google.maps.LatLng(44.910398, -93.271976),
zoom: 15,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
/* var infoWindow = new google.maps.InfoWindow(); */
// Change this depending on the name of your PHP file
$.ajax({
type: "POST",
url: "logic_abstract.php",
success: function(msg){
//alert(msg);
// call the count values
countthedata(msg);
msg = jQuery.parseJSON(msg);
var len1 = Object.keys(msg).length;
if(msg =="")
{
swal("There is no data that matches your search criteria");
}
for (i=0;i<len1;i++){
var mapimgpath = msg[i].imagepath;
var type = msg[i].reason_name;
var zip = msg[i].zip;
var addr = msg[i].addr;
var repname = msg[i].repname;
var point = new google.maps.LatLng(parseFloat(msg[i].latitude), parseFloat(msg[i].longitude));
var html = "<div class='gm-style-iw'><b>" + type + "</b><br>" + repname + "<br>" + addr + " , " + zip+"</div>";
var icon='<?php echo BASE_PATH;?>/mapview/'+mapimgpath;
marker = new google.maps.Marker({ map: map, position: point,icon: icon});
bindInfoWindow(marker, map, infoWindow, html);
}
}
});
How to remove the old marker with time interval and replace it with new marker automatically. I'm creating a real tracker using google map. `
var markersArray = [];
function initialize() {
var myLatlng = new google.maps.LatLng(39, -86);
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 1,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
$(function () {
$(document).ready(function(){
setInterval(function(){
$.ajax({
url: 'real.php', //the script to call to get data
//data: "",
dataType: 'json', //data format
success: function(data){ //on recieve of reply
var locations = data;
var infowindow = new google.maps.InfoWindow();
var marker, i;
deleteOverlays();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
});
}, 1000);
});
});
}
initialize();
How can I delete the markers I've used the clearOverlays but no markers are shown in the map. Thanks.
To remove a marker, you need to set its map to null:
for (var ii = 0; ii < markers.length; ii++) {
markers[ii].setMap(null);
}
Or, depending on your scenario, you could just update the marker's location:
marker.setPosition(newLatLng);
I have been following a tutorial to set up a google map for my website here and I have completed this, however I now want a custom info box that pops up when you click the icon. (at the moment it pops up with googles default)
I was trying to use this code to do it, but every time I try none of the icons appear.
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
var labelText = "City Hall";
var myOptions = {
content: labelText
,boxStyle: {
border: "1px solid black"
,textAlign: "center"
,fontSize: "8pt"
,width: "50px"
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-25, 0)
,position: new google.maps.LatLng(49.47216, -123.76307)
,closeBoxURL: ""
,isHidden: false
,pane: "mapPane"
,enableEventPropagation: true
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
This is the part that im changing at the moment
var infoWindow = new google.maps.InfoWindow;
to this
var infoWindow = new infoBox(myOptions);
.
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", 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);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
Any help to say where i'm going wrong would be appreciated
Assuming that you have included the infobox-library and the php-file returns the expected XML there is nothing wrong except of this:
var infoWindow = new infoBox(myOptions);
it has to be:
var infoWindow = new InfoBox(myOptions);
//-------------------^
I need help:
I have to create a map showing the marker when the user clicks on the input checbox.
example:
I click "hotels" and I see only the hotels.
I click no more hotels, disappearing markers on the map
The code:
<script type="text/javascript">
(function() {
window.onload = function(){
var latlng = new google.maps.LatLng(37.8530665, 15.287916300000006);
var options = {
zoom: 14,
center: latlng,
backgroundColor: '#fff',
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
var markers = new Array();
$(".chek").click(function() {
if($(this).is(':checked')) {
var id_checkbox = $(this).val();
$.post("ajax.php?page=mapHome",{ id_checkbox:id_checkbox }, function(data) {
for (i=0; i < data.marker.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.marker[i].latitude, data.marker[i].longitude),
animation: google.maps.Animation.DROP,
map: map,
title: data.marker[i].nome,
icon: data.marker[i].marker
});
markers[i] = marker;
markers[i].id_cat = data.marker[i].id_cat;
}// for
},"json");//json
} else {
//hide markers on the map
for (i = 0; i < markers.length; i++) {
if(id_checkbox == markers[i].id_cat) {
markers[i].setMap(null);
}
}
}
});
}
})();
</script>
I do a query through json and show results.
I see setMap(null); but no setMap(map);