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'
Related
I cannot assign polygon property to the area I want on the map in my project that I have created with open layers and angular
My method that I have created my map and then call in ngOnit()
IntilazeMapParsel() {
this.view = new View({
center: [3876682.9740679907, 4746346.604388495],
zoom: 6.5,
// minZoom:5.8
});
console.log("mao")
this.mapParsel = new Map({
view:this.view,
layers: [
new Tile({
source: new XYZ({
url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}',
}),
zIndex: -5444
}),
],
target: 'ol-map-parsel'
});
}
Here is the code I wrote because I want to show the multypolygon value on my map.
I don't understand why it doesn't appear on the map, I would appreciate it if you could help.
Hello I am using google map charts available in google visualization chartsGoogle Map Chart. But there is no way we can hide the full screen control symbol appears in top-right position. Available options can be seen here. I have also tried to use fullscreenControl: false option given on official google map api documentation fullscreenControl but that did not work for me. Please suggest how to disable this options on mobile/ionic apps.
this.element = this.el.nativeElement;
let mapOptions = {
showTooltip: true,
tooltip: { isHtml: true },
mapType: 'satellite',
useMapTypeControl: true,
fullscreenControl: false
};
let data = [
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
];
dataTable = google.visualization.arrayToDataTable( data );
this.map = new google.visualization.Map(this.element);
this.map.draw( dataTable, mapOptions );
Thanks in advance
Below code working for me in Ionic app, You can try this:
declare var google; // declare this var above #Component({}) with your other imports
directionsDisplay = new google.maps.DirectionsRenderer;
#ViewChild('map') mapElement: ElementRef;
map: any;
this.map = new google.maps.Map(this.mapElement.nativeElement, {
zoom: 15,
center: this.maplocation, // this.maplocation={lat:'',long:''} is my Lat,Long values
fullscreenControl: false
});
this.directionsDisplay.setMap(this.map);
new google.maps.Marker({
position: this.maplocation,
map: this.map
});
In HTML :
<ion-content>
<div #map id="map"></div>
</ion-content>
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 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
}
});
});
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. :)