So, I have a JavaScript code that shows a map, and my location. It also has a few extra settings applied to it. My question is, looking at the following JS code, and using the GoogleMaps API here: http://maps.googleapis.com/maps/api/js?sensor=false, is there any way to show the visitors locations on this map?
I am trying t build a virtual site view GeoLocator. That shows the locations of all my sites viewers. Or, maybe there is a plugin online.
var map;
function initialize() {
var options =
{
zoom: 2,
center: new google.maps.LatLng(geoip_latitude(), geoip_longitude()),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
poistion: google.maps.ControlPosition.TOP_RIGHT,
mapTypeIds: [google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.SATELLITE]
},
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.ZOOM_PAN
},
scaleControl: true,
disableDoubleClickZoom: true,
draggable: true,
streetViewControl: true,
draggableCursor: 'move'
};
map = new google.maps.Map(document.getElementById("map"), options);
// Add Marker and Listener
var latlng = new google.maps.LatLng(geoip_latitude(), geoip_longitude());
var marker = new google.maps.Marker
(
{
position: latlng,
map: map,
title: 'Click me'
}
);
var infowindow = new google.maps.InfoWindow({
content: 'You Are Here'
});
google.maps.event.addListener(marker, 'click', function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
}
Well, that's possible... you would need a server to send this information to (which you would have to set up on the page that the viewers visit), that would find their IP and lookup their long/lat on an IP database, if that IP is known (that information is not always there and not necessarily accurate, if it is). Then you would need to have an interface that gets the long/lat values from this database and displays them on the map with markers, as I described on my comment.
Of course, you can also just use Google Analytics (google.com/analytics) where all of this is done for you. :)
Related
UPDATE: Code below is fixed as per accepted answer and is confirmed to be working.
I'm a bit stuck with Meteor, please help me out.
I've installed the dburles:google-maps package and got the map to show markers just fine.
Then I tried to display a heatmap and it's causing an error, I can't resolve - "Uncaught InvalidValueError: setMap: not an instance of Map(anonymous function)"
Console output can be seen here - http://improveit.meteor.com/map
Template.map.helpers({
issueMapOptions: function() {
// Make sure the maps API has loaded
if (GoogleMaps.loaded()) {
// Map initialization options
return {
zoom: 13,
center: new google.maps.LatLng(37.774546, -122.433523),
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: false,
panControl: false,
streetViewControl: false
};
}
}
});
Template.map.onCreated(function() {
// We can use the `ready` callback to interact with the map API once the map is ready.
GoogleMaps.ready('issueMap', function(issueMap) {
var issueData = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.757676, -122.405118),
new google.maps.LatLng(37.757039, -122.404346),
new google.maps.LatLng(37.756335, -122.403719),
new google.maps.LatLng(37.755503, -122.403406),
new google.maps.LatLng(37.754665, -122.403242),
new google.maps.LatLng(37.753837, -122.403172),
new google.maps.LatLng(37.752986, -122.403112),
new google.maps.LatLng(37.751266, -122.403355)
];
var issueArray = new google.maps.MVCArray(issueData);
var heatMapLayer = new google.maps.visualization.HeatmapLayer({
data: issueArray,
radius: 20
});
heatMapLayer.setMap(issueMap.instance);
});
});
<template name="map">
<h1>Issue heat map</h1>
<p>This map will display issues and their severity</p>
<div class="map-container">
{{> googleMap name="issueMap" options=issueMapOptions}}
</div>
</template>
Change this line:
heatMapLayer.setMap(issueMap);
to
heatMapLayer.setMap(issueMap.instance);
The setMap method requires a google map instance. the callback of .ready does not directly provide this as it also has an options object for extra convenience.
I confirmed it works on your site:
Template.map.helpers({
issueMapOptions: function() {
// Make sure the maps API has loaded
if (GoogleMaps.loaded()) {
// Map initialization options
return {
zoom: 13,
center: new google.maps.LatLng(37.774546, -122.433523),
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: false,
panControl: false,
streetViewControl: false
};
}
}
});
Template.map.onCreated(function() {
// We can use the `ready` callback to interact with the map API once the map is ready.
GoogleMaps.ready('issueMap', function(issueMap) {
var issueData = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.757676, -122.405118),
new google.maps.LatLng(37.757039, -122.404346),
new google.maps.LatLng(37.756335, -122.403719),
new google.maps.LatLng(37.755503, -122.403406),
new google.maps.LatLng(37.754665, -122.403242),
new google.maps.LatLng(37.753837, -122.403172),
new google.maps.LatLng(37.752986, -122.403112),
new google.maps.LatLng(37.751266, -122.403355)
];
var issueArray = new google.maps.MVCArray(issueData);
var heatMapLayer = new google.maps.visualization.HeatmapLayer({
data: issueArray,
radius: 20
});
heatMapLayer.setMap(issueMap.instance);
});
});
<template name="map">
<h1>Issue heat map</h1>
<p>This map will display issues and their severity</p>
<div class="map-container">
{{> googleMap name="issueMap" options=issueMapOptions}}
</div>
</template>
I have got a google map loading on my website using the api. I have styled it how I would like but I need to add a pin with custom image to a location on my map. The center co-ordinatres are different of those that I would like to use for the pin. I have tried using the code supplied in the google api docs but cannot seem to get it to work. below is the code I am using now without the pin code as it wasn't working. Would someone be able to tell me what to add to get the pin working for an image file called:
'pin.png'
and the co-ordinates:
51.4531807,-2.1864739,17
here is my current JS
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
var map = new google.maps.Map(mapElement, mapOptions);
var office = new google.maps.LatLng(51.4477764,-2.2015512);
var marker = new google.maps.Marker({
position: office,
map: map
});
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 17,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(51.4476895, -2.2057354), // New York
draggable: false,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
streetViewControl: false,
disableDefaultUI: true,
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [ { featureType:'water', elementType:'all', stylers:[ {hue:'#bbbbbb'}, {saturation:-100}, {lightness:-4}, {visibility:'on'} ] },{ featureType:'landscape', elementType:'all', stylers:[ {hue:'#999999'}, {saturation:-100}, {lightness:-33}, {visibility:'on'} ] },{ featureType:'road', elementType:'all', stylers:[ {hue:'#999999'}, {saturation:-100}, {lightness:-6}, {visibility:'on'} ] },{ featureType:'poi', elementType:'all', stylers:[ {hue:'#aaaaaa'}, {saturation:-100}, {lightness:-15}, {visibility:'on'} ] },{
featureType: 'poi.business',
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using out element and options defined above
}
The code to display the pin on the map was correct however this was outside of where the map is accessible. To rectify this issue the code had to be put after the map and before the closing bracket as displayed by #Dr.Molle
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
var hadston = new google.maps.LatLng(51.4477764,-2.2015512);
var marker = new google.maps.Marker({
position: hadston,
map: map,
clickable: false,
icon: 'pin.png'
});
}
To display a custom pin I used icon with a direct link to the image.
icon: 'pin.png'
I am using geocomplete.js for my google map. Also twitter bootstrap.
Currently I have a button:
<button id="btn-pin" type="button" class="btn btn-primary">PIN</button>
This button is to pin the marker on the map on the position I want (Latlng provided)
My js function to call on click when the button is click:
$("#btn-pin").on('click', function() {
var myLatlng = new google.maps.LatLng(1.294400,103.849339);
$("#btn-pin").geocomplete({
map: ".map_canvas",
mapOptions: {
scrollwheel: true
},
markerOptions: {
draggable: true,
position: myLatlng,
map: ".map_canvas"
},
});
});
My map id in a the div:
<div class="map_canvas"></div>
So whenever the button pin is clicked, my map div just greys out.
Is there something wrong with my code? I tried to follow google map API and other articles on the internet as closely as possible and this is the best I could get..
I fixed my JS and it worked
The JS:
$("#btn-pin").on('click', function() {
var setloc = new google.maps.LatLng(1.294400,103.849339);
$("#btn-pin").geocomplete({
map: ".map_canvas",
details: "form",
location: setloc,
mapOptions: {
scrollwheel: true,
maxZoom: 16
},
markerOptions: {
draggable: true
}
});
});
I have a model Locations with two columns latitude and longitude. I want to find a way where I can get the list of locations and pass them to google maps using Ajax and javascript. So far my code is as follows:
map.js:
function initialize()
{
var map;
var latlng = new google.maps.LatLng(37.09, -95.71);
var options = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
disableDoubleClickZoom: true,
noClear: true,
navigationControl: true,
navigationControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
map = new google.maps.Map(document.getElementById('map'), options);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Click me',
});
}
locations_controller.rb
def show
#location = Location.find(params[:id])
respond_to do |format|
format.html # show.html.erb
format.json { render json: #location }
end
end
Page displaying the map:
<div id="map" onload="initialize();">
</div>
SO now I want to find a way to make an AJAX request from map.js so I can get the locations from the Location model and pass it to the marker object so that when a map is loading all the locations pre-existing in the database are passed to marker and those markers appear.
Thank you.
Oh I was able to find my way to get the list of locations. The controller and view are left untouched.
I added the following ajax in map.js which did the work for me.
$.ajax({
type: "GET",
dataType: "json",
url: "/locations",
success: function(data){}
});
Now data can be passed to the marker object in google maps.
I wonder whether someone may be able to help me please.
I'm using the code below to perform an Google Maps Autocomplete action upon a user entering address details:
// JavaScript Document
var geocoder;
var map;
var marker;
function initialize(){
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(54.312195845815246, -4.45948481875007),
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true
});
}
$(document).ready(function() {
initialize();
$(function() {
$("#address").autocomplete({
//This bit uses the geocoder to fetch address values
source: function(request, response) {
geocoder.geocode( {'address': request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
//This bit is executed upon selection of an address
select: function(event, ui) {
$("#osgb36lat").val(ui.item.latitude);
$("#osgb36lon").val(ui.item.longitude);
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setZoom(16);
map.setCenter(location);
}
});
});
google.maps.event.addListener(marker, 'dragend', function() {
geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#address').val(results[0].formatted_address);
$('#osgb36lat').val(marker.getPosition().lat());
$('#osgb36lon').val(marker.getPosition().lng());
var point = marker.getPosition();
map.panTo(point);
}
}
});
});
})
and this is how I place it within my form.
<div>
<input name="address" type="text" id="address" size="40" maxlength="40" style="font:Calibri; font-size:12px" />
</div>
What I'd now like to be able to do is limit the number of items viewable in the list. I've done some research on several forums and on the Google Maps site but I can't seem to find a solution, so I'm not even sure whether this is possible.
I just wondered whether someone could possibly have a look at this please and provide a little guidance on how I may be able to go about this.
Many thanks and kind regards
The Google Maps V3 API now incudes an autocomplete feature that will adapt any text input field to autocomplete locations &/or Places. It doesn't show thumbnails yet but the addition of Places will be great for some use cases, here's the details:
Documentation: http://code.google.com/apis/maps/documentation/javascript/places.html#places_autocomplete
Reference: http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete
Example: http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html
I think these will help you.....
After some further research, I found a great tutorial here: http://rjshade.com/2012/03/27/Google-Maps-autocomplete-with-jQuery-UI/ which I've been able to adapt.