I want to use an image(.jpg) that I have as a marker instead of the default marker/pin on my Google map. But the image won't show. There are lots of the same questions on this forum but none of them has helped me.
As soon as I take away the icon attribute from google.maps.Marker object the default marker shows. So that indicates that it somehow can't find my image... right?
Even when I hardcode the following link
https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png
that marker image shows. But not the one I have locally in my project.
var map = null;
var mapHub;
var markers = [];
$(function ()
{
mapHub = $.connection.myHub;
//Start the hub
$.connection.hub.start(function ()
{
//Get the current location from the browser
navigator.geolocation.getCurrentPosition(function (position)
{
//Create the map element on the page.
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: position.coords.latitude, lng: position.coords.longitude },
zoom: 15
});
//Add marker of current position to map
markers.push(new google.maps.Marker({
position: { lat: position.coords.latitude, lng: position.coords.longitude},
map: map,
icon: '~/Images/MapMarkerIcon.jpg'
}));
});
});
});
Related
I have a Google Map on my website and I am also using a Custom marker to mark the location of the business. I want to bring the icon about 100px to the left as it's currently center of the map... How can I do this?
My code:
function initMap() {
var LatLng = {
lat: REMOVED, lng: REMOVED
};
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: LatLng
});
var image = 'REMOVED';
var customMarker = new google.maps.Marker({
position: LatLng,
map: map,
icon: image
});
}
You've almost done. The problem is that you are centering the map in the same position than your marker.
So, set another LatLang for your marker or center the map in another position.
var markerLatLang={lat: WHATEVER, lng: WHATEVER}
var customMarker = new google.maps.Marker({
position: markerLatLang,
map: map,
icon: image
});
Checkout this for further information.
I have a list of enterprices and need to display a map on their respective modal, for this I have this:
<div class="row" id="googleMap<%=enterprice.id%>" style="width 100%; height: 300px;" data1='<%=enterprice.latitud%>' data2='<%=enterprice.longitud%>'>
</div>
this code is on a html.erb file.
My function for loading the map:
<script>
function myMap(lat, long) {
var uluru = { lat: lat, lng: long};
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
And a jquery helper for passing the data
$(document).on("ready", function() {
$('#googleMap<%=enterprice.id%>').each(function (index, element) {
var $this = $(element);
myMap($this.attr("data1"), $this.attr("data2"));
});
});
The problem is the map is only loading on the modal for the first cell, but not actually displaying any map.
And the other cells wont even load the map.
First of all, you don't need a map and a modal for each. You can have one and change them using JS. This way you will not overload your page with elements you will only use in series but never together in parallel.
You can have a map defined in your modal whenever the page is ready.
<script>
var map;
var old_marker;
function initMap() {
var point = {lat: 0, lng: 0};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: point,
mapTypeId: 'terrain'
});
// This event listener will call addMarker() when the map is clicked.
map.addListener('click', function(event) {
addMarker(event.latLng);
});
// Adds a marker at the center of the map.
addMarker(point);
}
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
if(old_marker){
old_marker.setMap(null)
}
old_marker = marker
markers.push(marker);
map.setCenter(location);
}
</script>
Now we have to add a marker for each enterprise just by clicking on them.
I suggest adding a certain class to them
$(document).on("ready", function() {
initMap();
$(.enterprise).click(function(){
addMarker($this.attr("data1"), $this.attr("data2"));
});
});
By this, a marker will be added on the click on each enterprise and the map will focus that location. Now all you need to do is show the Modal.
References: https://developers.google.com/maps/documentation/javascript/examples/marker-remove
So basically what I am trying to do is have a map cluster and once you click into the clusters and click on the individule map markers you will be linked off to a different page on my website.
this is what i have so far. but i cant seem to pull the URLS through.. into different markers.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -39.3642, lng: 164.0444318}
});
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
url: "http://travelpark.co.nz" //Will be different for each marker
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: -37.7862985, lng: 175.2773836},
{lat: -37.8011434, lng: 174.871265}
]
google.maps.event.addListener(markers, 'click', function() {
window.location.href = this.url;
});
The event listener at the bottom doesnt work.. i cant seem to figure this out. any help would be appreciated
Assign listener to each marker object not to the array. Use your map function itself to avoid 2 for loops:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
url: "http://travelpark.co.nz" //Will be different for each marker
});
google.maps.event.addListener(marker, 'click', function(){
window.location.href = this.url;
});
return marker;
});
i have a problem with my places from google maps, i already have a functionality map with a file kml in my https server, but i don't want to download and upload the map every time I make changes, not work for me only embed I need manipulated with API, so this is my code:
var map;
var src = 'MY_SERVER/points_vl.kmz';
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(20.63736, -105.22883),
zoom: 2,
});
loadKmlLayer(src, map);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = 'http://www.nearby.org.uk/google/circle.kml.php?radius=5miles&lat='+position.coords.latitude+'&long='+position.coords.longitude;
loadKmlLayer(circle, map);
map.setCenter(pos);
setTimeout(function(){
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Current Location'
});
infowindow.setPosition(pos);
}, 2000);
});
}
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
This work fine, but have a way for direct the kml from my url of google maps places?
Using an existant Google 'My Places' map with Maps API v3 styling this thread have some idea, but not work, if you get a idea how make it will make it wonderful
Go to your "MyMap" map. Click on the three dots next to the name of the map, click on "Export to KML":
Choose the "Keep data up to date with network link KML (only usable online):
Rename the .kmz file to .zip, then open it and open the doc.kml file it contains. That file will have the direct link to the KML data specifying your "MyMap".
Use that link in a google.maps.KmlLayer
proof of concept fiddle
original MyMap
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://www.google.com/maps/d/kml?mid=1-mpfnFjp1e5JJ1YkSBjE6ZX_d9w',
map: map
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<!-- add your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
I need some help regarding the Google Maps API. I was able to initialize the map. Now I want to add some markers to it.
I have a set of checkboxes (they are called "networks"). Each checkbox has a hidden longitude and latitude field. If the checkbox is checked, a marker should be displayed on the map
I managed to do this with the detour, of clicking on the map. But I want to trigger the creation of new markers on change of the checkbox.
Here is how it works, when I click on the map the markers appear:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 48.7791, lng: 9.0367}
});
google.maps.event.addListener(map, "click", function(event) {
//Get all checked Networks
var checked_network = $( ".checkbox-network:checked" );
checked_network.each(function(){
network_id = $( this ).data("network-id");
//Get the hidden location longitudes and latitudes for each checked network element
network_locations_latitude = $(".location_latitude_network_"+network_id).val();
network_locations_longitude = $(".location_longitude_network_"+network_id).val();
var marker = new google.maps.Marker({
position: new google.maps.LatLng(network_locations_latitude,network_locations_longitude),
map: map
});
});
});
}
Here is how I try to get it to work, with clicking on the checkboxes. Unfortunately nothing happens. The marker object shows up in the JavaScript console, but on the map no markers appear.
$(document).on('change','.checkbox-network', function() {
var checked_network = $( ".checkbox-network:checked" );
checked_network.each(function(){
network_id = $( this ).data("network-id");
//Get the hidden location longitudes and latitudes for each checked network element
network_locations_latitude = $(".location_latitude_network_"+network_id).val();
network_locations_longitude = $(".location_longitude_network_"+network_id).val();
console.log(network_id + " - " + network_locations_latitude);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(network_locations_latitude,network_locations_longitude),
map: map,
title: "test"
});
console.log(marker);
});
});
What am I missing? How can I show the markers in the google-map with the onchangeevent of the checkboxes?
You have to initialize map variable globally. Currently scope of map variable only available inside initMap() function.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 48.7791, lng: 9.0367}
});
$(document).on('change','.checkbox-network', function() {
var checked_network = $( ".checkbox-network:checked" );
checked_network.each(function(){
network_id = $( this ).data("network-id");
//Get the hidden location longitudes and latitudes for each checked network element
network_locations_latitude = $(".location_latitude_network_"+network_id).val();
network_locations_longitude = $(".location_longitude_network_"+network_id).val();
console.log(network_id + " - " + network_locations_latitude);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(network_locations_latitude,network_locations_longitude),
map: map,
title: "test"
});
console.log(marker);
});
});
In the second snippet of your code, the map isn't defined because it's been defined in the scope of initMap(). I wonder why Google doesn't throw any errors.
change your initMap like below; move the map object to the global scope to be accessible from all scope (I always use this for my own projects)
initMap() {
window.map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 48.7791, lng: 9.0367}
});
}
Here you should be more logical with the name map, so replace it with another name to avoid further conflicts.