I am trying to create a map using custom marker icons of various shapes and colors. I have the code working such that I can use any single marker for all locations, but not different markers for different locations. I am currently programming this into a FileMaker Pro solution however I'm writing the code in Javascript. I am new to Javascript and I'm picking things up as I go, but below is the code I have so far:
var concus = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/red_customer.png';
var rencus = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/purple_customer.png';
var sercus = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/green_customer.png';
var connon = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/red_noncustomer.png';
var rennon = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/purple_noncustomer.png';
var sernon = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/green_noncustomer.png';
var imagenum;
var markers = [];
for (var i = 0; i < data.length; ++i) {
var latlng = new google.maps.LatLng(data[i].latitude, data[i].longitude);
var marker = new google.maps.Marker({position: latlng, map: map, icon: markerimage[i], title:data[i].label, info:data[i].info});
markers.push(marker);
}
"markerimage" after "icon: " is the array which stores the values "concus, rencus, sercus...etc" from my database. If i replace "markerimage" with any of the specific ones the script works and shows me a map with all the locations on them. If I use markerimage I only get a map with nothing on it.
Any help would be greatly appreciated!
Zak
Try this:
var iconBase = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/';
var icons = {
concus: {
icon: iconBase + 'red_customer.png'
},
rencus: {
icon: iconBase + 'purple_customer.png'
},
sercus: {
icon: iconBase + 'green_customer.png'
},
connon: {
icon: iconBase + 'red_noncustomer.png'
},
rennon: {
icon: iconBase + 'purple_noncustomer.png'
},
sernon: {
icon: iconBase + 'green_noncustomer.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
Related
I'm looking how to add specific markers to my gmap.
This is the code:
LatLng coord1 = new LatLng (y, x);
advancedModel.addOverlay(new Marker(coord1, "test", "orange.png", "http://maps.google.com/mapfiles/ms/micons/blue-dot.png"));
I want to add my specific marker which is in /resources/images not this one http://maps.google.com/mapfiles/ms/micons/blue-dot.png
Can you help?
You can add custom markers in Google Maps and you can also change the marker icon, depending on the type of feature the marker's being added to. Each point of interest in the list of campus features has a type attribute.
Below code is a sample code snippet how to add custom markers:
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
You can do something like this:
Marker newMarker = new Marker(new LatLng(latitude, longitude));
newMarker.setIcon("resources/media/marker-blue-dot.png");
simpleModel.addOverlay(newMarker);
I would like to display my own custom markers on a Google Map that is displaying data from an XML table. The map functions correctly and displays default markers, but I cannot work out how to change the markers to correspond to the data types in my table.
I've been following the Using PHP/MySQL with Google Maps tutorial and have tried to incorporate their code for custom marker icons into mine but I haven't been able to get it to work. There are several other questions on here that sort of deal with this but I haven't been able to apply the answers to my code.
I have the following code first:
var map;
var markers = [];
var infoWindow;
var locationSelect;
var customIcons = {
CP: {icon: 'icons/country_park.png'},
LNR: {icon: 'icons/lnr.png'},
PG: {icon: 'icons/parks_gardens.png'},
SAC: {icon: 'icons/sac.png'},
VG: {icon: 'icons/village_green.png'},
WALK: {icon: 'icons/walk.png'},
MG: {icon: 'icons/m_green.png'},
MBC: {icon: 'icons/mbc.png'},
WT: {icon: 'icons/wt.png'},
KWT: {icon: 'icons/kwt.png'}
};
then this is the section that loads the positions from the XML:
var searchUrl = 'TESTxml_output.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var agency = markerNodes[i].getAttribute("agency");
var type = markerNodes[i].getAttribute("type");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng"))
);
createOption(name, distance, i);
createMarker(latlng, name, agency);
bounds.extend(latlng);
}
map.fitBounds(bounds);
locationSelect.style.visibility = "invisible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
function createMarker(latlng, name, agency, type) {
var html = "<b>" + name + "</b> <br/>" + agency;
var icon = customIcons[type];
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: icon
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
Where am I going wrong?
Your createMarker function takes 4 arguments, you are only providing 3 when you call it.
definition:
function createMarker(latlng, name, agency, type) {
call:
createMarker(latlng, name, agency);
I'm managing this website: http://www.gprprojecten.nl
Basically what I'm doing with is is getting a stream of data from a webservice and chaching this. Afterwards I do all kinds of things to this data, including displaying all the projects on a google map.
Problem is, that as the projectnumber grows, the (custom)pins start to overlap (not visible, not clickable).
So I want to cluster my pins.
I started working on a google maps clusterer library using A32.blog as my starting point.
But now a problem arises. As I have chosen a client side filter system called filter.js, I depend on that way of using google maps, which is with objects rather then an array of markers as used in the clusterer library.
Here is the code I use to generate my map in combination with filter.js:
var googleMap = {
center_lat_lng: [52.14, 5.3],
map: null,
markers: {},
addMarker: function (project) {
var that = this;
var image = new google.maps.MarkerImage('#Url.Content("~/Content/img/marker.png")',
new google.maps.Size(63, 27),
new google.maps.Point(0, 0),
new google.maps.Point(23, 27));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(project.loclat, project.loclong),
map: this.map,
title: project.gebouwnaam,
icon: image
});
marker.info_window_content = "<div class=\"gmapcontentwindow\"><h4>" + project.gebouwnaam + "</h4><img src=\"" + project.thumburl + "\" alt=\"" + project.gebouwnaam + "\" /><div class=\"gebouwdata\"><span class=\"date\">" + project.publicatiedatum + "</span><h5>" + project.plaats + "</h5><span>" + project.gebruiksfunctie + " | " + project.gebouwcategorie + "</span><span>" + project.licentiehouder + "</span><span class=\"stars " + project.rating + "\"></span>"
if (project.akkoorddoorexpert == "True") {
marker.info_window_content += "<span class=\"expert\"></span>"
}
var forwardUrl = '#Url.Content("~/Home/Details/")';
marker.info_window_content += "<span class=\"forward\">Lees meer >></b></span></div></div>"
this.markers[project.id] = marker
google.maps.event.addListener(marker, 'click', function () {
that.infowindow.setContent(marker.info_window_content)
that.infowindow.open(that.map, marker);
});
},
updateMarkers: function (filtering_result) {
var google_map = this;
$.each(google_map.markers, function () { this.setMap(null); })
$.each(filtering_result, function () {
google_map.markers[this.id].setMap(google_map.map);
});
},
init: function () {
var options = {
center: new google.maps.LatLng(this.center_lat_lng[0], this.center_lat_lng[1]),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(document.getElementById("gmap"), options)
this.infowindow = new google.maps.InfoWindow({
});
//var markersarray = $(this.markers).toArray();
//console.log(markersarray);
//doet het nog niet???
//http://a32.me/2012/05/handling-huge-amount-of-markers-on-google-maps-with-clusters/
//var markerCluster = new MarkerClusterer(this.map, markersarray, {
// gridSize: 10,
// minimumClusterSize: 2
//});
}
};
project is an object that is passed to the init function from filter.js
You need to add the Marker Clusterer to the global scope or keep a reference to it in your object.
Hi I have adapted code from examples and other websites to suit myself, I need the info window to display four attributes, "name" "address" "phone" and "breeds". Once I remove var type = markers[i].getAttribute("type"); (which is an existing attribute from the google maps example code)
and replace it with:
var phone = markers[i].getAttribute("phone");
var breeds = markers[i].getAttribute("breeds");
The map doesn't display any markers. I am not that high up on javascript so its probably something simple I'm missing. The map can be found here: http://connormccarra.com/test/.
The info is being taken from this xml file: http://connormccarra.com/test/phpsqlajax_genxml3.php
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.5076512854544, -7.701416015625),
zoom: 7,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml3.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);
}
});
}
Cheers!
This looks like the problem:
var icon = customIcons[type] || {};
The code you copied is is setup to change the icon based on the "type". If you remove the line:
var type = markers[i].getAttribute("type");
There should be a clear javascript error. If you don't want the custom icons, change that line to var icon = {}; or remove it and change your marker to be:
var marker = new google.maps.Marker({
map: map,
position: point
});
I have a map I am developing. The basic Google RED DROPLET icon shows up as my marker image. How can I get my own custom image to come up? I have individual images for just about all 50 of my markers (will be company's logo).
Can someone help? Here's the link.
Any help setting custom markers with the code I have presently would be great.
From actual code:
var image = './beachflag.png';
[...]
var marker=new google.maps.Marker({
position: myPosition,
map: map,
icon: image
});
Your code:
var point = new google.maps.LatLng(37.984798,-121.312094);
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>');
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]
What you need to do:
var point = new google.maps.LatLng(37.984798,-121.312094);
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>', image);
And change CreateMarker:
function createMarker(latlng, html, img) {
// Note here the addition of the img parameter
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
***icon: img,***
zIndex: Math.round(latlng.lat()*-100000)<<5
});
[...]
EDIT
A quick test with your code and my mods.
You can select the image and later associated that image with your lat and long, in this case there is one function that creates the marker.
if(location.category=="TEAMNAME"){
var image='img/blueMarker.png';
}
if(location.category=="TEAMNAME2"){
var image='img/redMarker.png';
}
function displayLocation(location){
var content = '<strong><p>Team: ' +location.category + '</strong>';
var latLng = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true,
visible: true,
title: location.category,
icon: image
});
/*Content window asociated to created markers*/
google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(content);
infowindow.open(map, marker);
});
return marker;
}