i've started very enthousiastic with google maps and managed to get the info from my mysql dbase to the map on my site. The problem i'm facing now is that i want to be able to click through from the info window to a page on my site (the link also comes out of the dbase).
Here is the standard google api code I'm using now ('mijnlink' is the link), i've tried a lot of different things but so far no solution, hope you can help me to find the answer:
GDownloadUrl("../phpsqlajax_genxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var mijnlink = markers[i].getAttribute("mijnlink");
var naam = markers[i].getAttribute("naam");
var address = markers[i].getAttribute("address");
var hotelcampingbungalow = markers[i].getAttribute("hotelcampingbungalow");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, mijnlink, naam, address, hotelcampingbungalow);
map.addOverlay(marker);
}
});
function createMarker(point, mijnlink, naam, address, hotelcampingbungalow) {
var marker = new GMarker(point, customIcons[hotelcampingbungalow]);
var html = "<b>" + mijnlink + hotelcampingbungalow + " " + naam + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
Got some other help, the var html in the Createmarker function must be like this:
var html = "<b><a href='" + mijnlink + "'>klik hier</a>" + hotelcampingbungalow + " " + naam + "</b> <br/>" + address;
Related
Let me explain the project a bit. i have a huge list of stores with addresses (longitude and latitude and code client ....).
Now, my problem is, i must be able to filter these markers depending on CodeClient i mean to find the client in google maps based on CodeClient .
The implementation is similar to the answer I mentioned before. You should add an input for code of client and a search button. In the function where you create markers add a property 'code' for each marker marker.code = CodeClient;. When you click search button it executes the filterByCode() function. If you pass empty value it restores all markers.
Have a look at modified code
// necessary variables
var map;
var infoWindow;
var markersData = [];
var markerCluster;
var markerArray = []; //create a global array to store markers
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(32, -6),
zoom: 7,
mapTypeId: 'roadmap',
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// create MarkerClusterer, markersArray is not populated yet
markerCluster = new MarkerClusterer(map, [], {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
// a new Info Window is created
infoWindow = new google.maps.InfoWindow();
// Event that closes the Info Window with a click on the map
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
// Finally displayMarkers() function is called to begin the markers creation
displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers() {
// this variable sets the map bounds according to markers position
var bounds = new google.maps.LatLngBounds();
// for loop traverses markersData array calling createMarker function for each marker
$.get("https://gist.githubusercontent.com/abdelhakimsalama/358669eda44d8d221bf58c629402c40b/raw/bae93c852669a35f0e7053e9f8d068841ddf146a/get_data_google_api", function(response) {
markersData = JSON.parse(response);
for (var i = 0; i < markersData.length; i++) {
var latlng = new google.maps.LatLng(markersData[i].Latitude, markersData[i].Longitude);
var Route = markersData[i].Route;
var Secteur = markersData[i].Secteur;
var Agence = markersData[i].Agence;
var CodeClient = markersData[i].CodeClient;
var PrecisionGPS = markersData[i].PrecisionGPS;
var Latitude = markersData[i].Latitude;
var Longitude = markersData[i].Longitude;
var BarCode = markersData[i].BarCode;
var PrenomClient = markersData[i].PrenomClient;
var NumAdresse = markersData[i].NumAdresse;
var Tel = markersData[i].Tel;
var Whatsapp = markersData[i].Whatsapp;
var NbrFrigo = markersData[i].NbrFrigo;
var OpenAm = markersData[i].OpenAm;
var CloseAm = markersData[i].CloseAm;
var OpenPm = markersData[i].OpenPm;
var ClosePm = markersData[i].ClosePm;
var OpenAmVen = markersData[i].OpenAmVen;
var CloseAmVen = markersData[i].CloseAmVen;
var OpenPmVen = markersData[i].OpenPmVen;
var ClosePmVen = markersData[i].ClosePmVen;
var OpenAmDim = markersData[i].OpenAmDim;
var CloseAmDim = markersData[i].CloseAmDim;
var OpenPmDim = markersData[i].OpenPmDim;
var ClosePmDim = markersData[i].ClosePmDim;
var IMEI = markersData[i].IMEI;
var Date_Added = markersData[i].Date_Added;
createMarker(latlng, Route, Agence, Secteur, CodeClient, PrecisionGPS, Latitude, Longitude, BarCode, PrenomClient, NumAdresse, Tel, Whatsapp, NbrFrigo, OpenAm, CloseAm, OpenPm, ClosePm, OpenAmVen, CloseAmVen, OpenPmVen, ClosePmVen, OpenAmDim, CloseAmDim, OpenPmDim, ClosePmDim, IMEI, Date_Added);
// marker position is added to bounds variable
bounds.extend(latlng);
}
// Finally the bounds variable is used to set the map bounds
// with fitBounds() function
map.fitBounds(bounds);
});
}
// This function creates each marker and it sets their Info Window content
function createMarker(latlng, Route, Agence, Secteur, CodeClient, PrecisionGPS, Latitude, Longitude, BarCode, PrenomClient, NumAdresse, Tel, Whatsapp, NbrFrigo, OpenAm, CloseAm, OpenPm, ClosePm, OpenAmVen, CloseAmVen, OpenPmVen, ClosePmVen, OpenAmDim, CloseAmDim, OpenPmDim, ClosePmDim, IMEI, Date_Added) {
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: CodeClient
});
marker.code = CodeClient;
markerArray.push(marker); //push local var marker into global array
// add marker to the MarkerClusterer
markerCluster.addMarker(marker);
// This event expects a click on a marker
// When this event is fired the Info Window content is created
// and the Info Window is opened.
google.maps.event.addListener(marker, 'click', function() {
var dicoFrigosDetails = {};
var HTMLtext = "";
for (var i = 1; i <= Object.keys(dicoFrigosDetails).length / 4; i++) {
HTMLtext += '';
}
// Creating the content to be inserted in the infowindow
var iwContent = '<div id="iw_container">' +
'<div class="iw_title">Code Client : ' + CodeClient +
'</div>' + '<div class="iw_content">Précision : ' + PrecisionGPS +
'<br />Latitude : ' + Latitude +
'<br />Longitude : ' + Longitude +
'<br />Route : ' + Route +
'<br />Secteur : ' + Secteur +
'<br />Agence : ' + Agence +
'<br />Code-barres : ' + BarCode +
'<br />prenom de Client : ' + PrenomClient +
//'<br />nom Complet de Client : ' + PrenomClient + ' ' + NomClient +
'<br />Num Adresse : ' + NumAdresse +
'<br />Téléphone : ' + Tel +
'<br />Whatsapp : ' + Whatsapp +
'<br />Nbr Frigos : ' + NbrFrigo + HTMLtext +
'<br />Ouverture Matin : ' + OpenAm +
'<br />Fermeture Matin : ' + CloseAm +
'<br />Ouverture après-midi : ' + OpenPm +
'<br />Fermeture Après-midi : ' + ClosePm +
'<br />Ouverture Matin Ven : ' + OpenAmVen +
'<br />Fermeture Matin Ven : ' + CloseAmVen +
'<br />Ouverture après-midi Ven: ' + OpenPmVen +
'<br />Fermeture après-midi Ven: ' + ClosePmVen +
'<br />Ouverture Matin Dim : ' + OpenAmDim +
'<br />Fermeture Matin Dim : ' + CloseAmDim +
'<br />Ouverture après-midi Dim : ' + OpenPmDim +
'<br />Fermeture après-midi Dim : ' + ClosePmDim +
'<br />IMEI : ' + IMEI +
'<br />Date Passage : ' + Date_Added +
'</div>';
// including content to the Info Window.
infoWindow.setContent(iwContent);
// opening the Info Window in the current map and at the current marker location.
infoWindow.open(map, marker);
});
}
function filterByCode() {
var code = document.getElementById("code-client").value;
var bounds = new google.maps.LatLngBounds();
markerCluster.clearMarkers();
if (code) {
markerArray.forEach(function(marker) {
marker.setMap(null);
});
var filtered = markerArray.filter(function(marker) {
return marker.code === code;
});
if (filtered && filtered.length) {
filtered.forEach(function(marker) {
bounds.extend(marker.getPosition());
marker.setMap(map);
});
markerCluster.addMarkers(filtered);
markerCluster.redraw();
map.fitBounds(bounds);
}
} else {
markerArray.forEach(function(marker) {
bounds.extend(marker.getPosition());
marker.setMap(map);
});
markerCluster.addMarkers(markerArray);
markerCluster.redraw();
map.fitBounds(bounds);
}
}
html {
height: 100%;
background: gray;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
}
#iw_container .iw_title {
font-size: 16px;
font-weight: bold;
}
.iw_content {
padding: 15px 15px 15px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>InnoTech - Map - Server</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="search-code-container">
<input id="code-client" title="Enter code" type="text" placeholder="Enter code (E.g. 511557)" value=""/>
<input id="code-client-btn" type="button" value="Search" onclick="filterByCode()" />
</div>
<div id="map-canvas" />
I hope this helps!
I have successfully managed to make xml from mysql and present markers on a map (wo-hoo).
The script includes a infowindow with some basic data. I want to have the URL open en new window with the external URL.
The URL and the a href tag shows beautifully - and that's the issue - I want to be able to click on it :)
Could someone please help me with the code to do this? Bear in mind I have used a week to get the markers from the db. I'm in no position to rebuild the code (I hope).
This is the output I get
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(37.4419, 10.0),
zoom: 3
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('mapxml.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var country = markerElem.getAttribute('country');
var url = markerElem.getAttribute('url');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('url');
text.textContent = "<a href='" + url + "'>" + name + "</a>";
infowincontent.appendChild(text);
var marker = new google.maps.Marker({
map: map,
position: point,
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
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>
Unless you're working with custom html elements, the following
var text = document.createElement('url');
text.textContent = "<a href='" + url + "'>" + name + "</a>";
won't work. You should try instead
var text = document.createElement('a');
text.href=url;
text.textContent = name;
I have an html checkbox that runs an if else javascript function depending on whether it is check or unchecked. When the checkbox is checked it loads the markers called "Fishmark" from the DB. This works fine.
What I need help with is getting the markers to remove when the box is unchecked. I know the if, else statement is correct so it has be with the actual Google API code. I successfully used the setMap(null) on another part of my site so I'm kinda lost as to why its not taking all of the Fishmark markers off the map.
var checkbox = document.getElementById("chbx");
function addRemoveFishing(){
if(checkbox.checked==true){
fishingUrl("XML_Fishing.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var title = markers[i].getAttribute("title");
var water_type = markers[i].getAttribute("water_type");
var water_depth = markers[i].getAttribute("water_depth");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var bait = markers[i].getAttribute("bait");
var fish = markers[i].getAttribute("fish");
var notes = markers[i].getAttribute("notes");
var Fishhtml = "<b>" + title + "</b> <br/>" + water_type + "</b> <br/>" + water_depth + "</b> <br/>" + bait
+ "</b> <br/>" + fish + "</b> <br/>" + notes;
var icon = FishingIcon;
var Fishmark = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow4(Fishmark, map, Fishinfo, Fishhtml);
}
});
}
else {
Fishmark.setMap(null);
}
};
You are creating several markers in a for loop. In your else statement you are only removing one (1) marker from the map.
Store the markers in an array for instance and in your else statement make a for loop that calls setMap(null) for each marker.
I have a "store locator" setup here:
http://www.brynei.com/fertdealer_map_bry.htm
lat, lng, name, address, csz, and phone information is stored in a mySQL database. If you input zip code 13165, the locator works as it should. However, I need to limit a range of zip codes to show one marker, and display the marker html for a range of zip codes (66000 to 69999). This part is actually working to center the map using the function searchLocations() section, but I need some help in the function createMarker(latlng, name, address, csz, phone) and function createOption(name, distance, num) section.
Currently if you use zip code 67501, the map will center but no marker is displayed. I need it to place a marker in a specific location, and Company Name Inc, 123 Main St, Anywhere KS 67501, 555-555-1234 as the marker HTML. That marker would be static if a zip is used in the 66000 to 69999 range.
I can do something on the database side also if that is an easier solution.
Any help is appreciated.
These are the 3 sections (functions) I am having an issue with:
function searchLocations() {
var address = document.getElementById("addressInput").value;
var mylatlng = new google.maps.LatLng(37.928552, -97.898658);
var geocoder = new google.maps.Geocoder();
if (address >= 66000 && address <= 69999) {
map.setCenter(mylatlng);
map.setZoom(10); }
else {
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location); }
else {
alert(address + ' not found');
}
});
}}
function createMarker(latlng, name, address, csz, phone) {
var html = "<font face = 'arial'>" + "<b>" + name + "</b> <br/>" + address + "<br/>" + csz + "<br/>" + phone + "</font>";
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
I'm trying to improve my sound project site, but I'm stuck in... panning.
I have a Google map populated by markers, associated to a text and a recorded sound. It works. I'm trying to allow user to navigate map through panning, by I can't get my map panning.
I'm not an expert in php or Google API and this is my first post here, hope it's well formatted.
The web address of the project is soundplaces.net
I've created a function map_panning(), and then tried to call this function with
please PAN
in content div.
The map just reloads... even if I tried to place a "return false" in the function.
I also tried to make the map pan when a marker is clicked
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html); map.panTo(marker.getPoint());
});
But still, does not work.
Can anybody help me?
This a greater part of the code I have in my default.ctp (the site is made with CAKE), hope it helps.
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(<?php echo $CenterMap; ?>), 13);
map.setMapType(G_SATELLITE_MAP);
GDownloadUrl("http://www.soundplaces.net/xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var description = markers[i].getAttribute("description");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var file_name = markers[i].getAttribute("file_name");
var marker = createMarker(point, name, description, address, type, file_name);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, description, address, type, file_name) {
//var marker = new GMarker(point, customIcons[type]);
markerOptions = { icon:soundIcon };
var marker = new GMarker(point, markerOptions);
var html = "<b>" + name + "</b> <br/>" + address + "<br />" + description + "<br />" + "<object type='application/x-shockwave-flash' data='/media/dewplayer.swf?mp3=/media/audio/"+file_name+"' width='200' height='20'><param name='movie' value='dewplayer.swf?mp3=media/audio/"+file_name+"' /></object>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html); map.panTo(marker.getPoint());
});
return marker;
}
function map_panning() {
map.panTo(new google.maps.LatLng(44.433373,10.712251));
return false; //cancel navigation
}
Then in body
<body onload="load()" onunload="GUnload()">
<div id="content">
Please PAN
<?php echo $this->Session->flash(); ?>
<?php echo $content_for_layout; ?>
</div>
<?php echo $this->element('sql_dump'); ?>
</body>
You're mixing up a combination of Google Maps API 2 and API 3 code. The two don't work together, you have to use one or the other. API 2 is deprecated, so you should preferably use API 3.
e.g. new google.maps.LatLng(44.433373,10.712251) is API 3 but new GMarker(point, markerOptions) is API 2.
And if you did want to keep it all with API 2, you should probably amend your map_panning function to be something like:
map.panTo(new GLatLng(44.433373,10.712251));