Google Map: Mark Location based to the value of button - php

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

How to load marker animation one by one on google map [duplicate]

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 = [];
}

PHP: How to change the markers without refresh the google map in PHP ajax call?

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);
}
}
});

loading new markers and delete old marker. [duplicating]

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);

Use custom info box on google maps api

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);
//-------------------^

Filter with Google Maps and checkbox

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);

Categories