I set up a nice map in my rails application. Everything is working fine but I cannot style the map with SnazzyMaps.
Here is my map.js file:
import GMaps from 'gmaps/gmaps.js';
const mapElement = document.getElementById('map');
if (mapElement) { // don't try to build a map if there's no div#map to inject in
const map = new GMaps({ el: '#map', lat: 0, lng: 0 });
const markers = JSON.parse(mapElement.dataset.markers);
const mapMarkers = map.addMarkers(markers);
mapMarkers.forEach((marker, index) => {
marker.addListener('click', () => {
// map.setCenter(markers[index]);
markers[index].infoWindow.open(map, marker);
})
});
if (markers.length === 0) {
map.setZoom(2);
} else if (markers.length === 1) {
map.setCenter(markers[0].lat, markers[0].lng);
map.setZoom(14);
} else {
map.fitLatLngBounds(markers);
}
}
import { autocomplete } from '../components/autocomplete';
// [...]
autocomplete();
On SnazzyMaps they give the following example. My question is, where shall I insert which part of this code in my own file. Been trying it for a while now but cannot make it work. Here is SnazzyMaps example:
<!DOCTYPE html>
<html>
<head>
<title>Snazzy Maps Super Simple Example</title>
<style type="text/css">
/* Set a size for our map container, the Google Map will take up 100% of this container */
#map {
width: 750px;
height: 500px;
}
</style>
<!--
You need to include this script tag on any page that has a Google Map.
The following script tag will work when opening this example locally on your computer.
But if you use this on a localhost server or a live website you will need to include an API key.
Sign up for one here (it's free for small usage):
https://developers.google.com/maps/documentation/javascript/tutorial#api_key
After you sign up, use the following script tag with YOUR_GOOGLE_API_KEY replaced with your actual key.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY"></script>
-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// 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: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(40.6700, -73.9400), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{"featureType":"all","elementType":"geometry.fill","stylers":[{"weight":"2.00"}]},{"featureType":"all","elementType":"geometry.stroke","stylers":[{"color":"#9c9c9c"}]},{"featureType":"all","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#eeeeee"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#7b7b7b"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#c8d7d4"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#070707"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]}]
};
// 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 our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.6700, -73.9400),
map: map,
title: 'Snazzy!'
});
}
</script>
</head>
<body>
<h1>Snazzy Maps Super Simple Example</h1>
<h2>WY</h2>
<!-- The element that will contain our Google Map. This is used in both the Javascript and CSS above. -->
<div id="map"></div>
</body>
</html>
To set the style using Gmaps library, you need to define the styles and then set it to the current map as below:
const map = new GMaps({ el: '#map', lat: 0, lng: 0 });
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
}, {
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}, {
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map.addStyle({
styledMapName:"Styled Map",
styles: styles,
mapTypeId: "map_style"
});
map.setStyle("map_style");
Reference:
https://github.com/hpneo/gmaps/blob/master/examples/styled_maps.html
I currently have a google map with a places select box.
I currently have a (click) binding on the map, when it's clicked in a certain location, a marker will be placed on that location.
Now I also have an input field with places so you can search for specific areas. The problem is now that when you search for a spot, and then press the location, the location will not be picked but instead a marker will show on the area you tapped.
(looks like a z-index issue but the input is actually above the map).
This issue only occurs on iOS devices. Android and Windows work fine
Edit: setting .pac-container { z-index: 999999 !important; }
Code:
Html
<input *ngIf="!isStaticLocation" type="text" class="controls" #pacInput placeholder="Search Box"/>
<div #googleMap id="map" style="width: 100%; height: 300px;"></div>
TS (Simplified)
// init the google map
initMap() {
var centerOfMap;
var draggableMarker = true;
centerOfMap = new google.maps.LatLng(this.locationService.gpsLat, this.locationService.gpsLong);
var options = {
center: centerOfMap,
zoom: 11,
fullscreenControl: false,
disableDefaultUI: true, // dont allow default zoom/sattelite/street view
gestureHandline: 'cooperative' // disable scrolling conflict of the page
};
this.map = new google.maps.Map(this.googleMap.nativeElement, options);
this.marker = new google.maps.Marker({
position: centerOfMap,
map: this.map,
draggable: draggableMarker
});
var searchBox = new google.maps.places.SearchBox(this.googleInput.nativeElement);
// add the searchbar to the google map
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.googleInput.nativeElement);
// Bias the SearchBox results towards current map's viewport
this.map.addListener('bounds-changed', () => {
searchBox.setBounds(this.map.getBounds());
});
searchBox.addListener('places_changed', () => {
var places = searchBox.getPlaces();
if(places.length == 0) {
return;
}
var bounds = new google.maps.LatLngBounds();
places.forEach(place => {
if(!place.geometry) {
console.log("returned place contains no geometry");
return;
}
this.setMarkerLocation(place);
if(place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extends(place.geometry.location);
}
});
this.map.fitBounds(bounds);
});
google.maps.event.addListener(this.map, 'click', (event: any)=> {
var clickedLocation = event.latLng;
this.marker.setPosition(clickedLocation);
this.getMarkerLocation();
});
}
// function to set the location marker on a different spot
setMarkerLocation(place: any) {
this.marker.setMap(null);
this.marker = new google.maps.Marker({
position: place.geometry.location,
map: this.map,
draggable: true
});
this.getMarkerLocation();
}
// updates configuration of the app.
getMarkerLocation() {
var currLoc = this.marker.getPosition();
this.locationService.setGoogleMapsLocation(currLoc.lat(), currLoc.lng());
this.locationChanged = true;
}
I have created a new widget on google map using javascript and html, added a google map api(http://maps.googleapis.com/maps/api/js?key=xxx&callback=xxx) resource, but when i run it, gives error saying failed to load widget resource.
below is my code
Any help please
var map;
function initMap() {
map = new google.maps.Map(document.getElementById(
'map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
.
I currently have a Fusion Table Map that is synced to a Google Form through a script. It is for locations only in Oklahoma, so I am interested in adding a layer that will show the border of the state.
I made a KML Fusion Table with this information : https://www.google.com/fusiontables/embedviz?q=select+col2+from+1UUVOpuu7ymfkmuzyV9dO8PXwT2QoMFuRTCy8scvn&viz=MAP&h=false&lat=34.766328945783435&lng=-97.20538659179692&t=1&z=7&l=col2&y=2&tmplt=2&hml=KML
And I would like to add it to my map here:
https://www.google.com/fusiontables/embedviz?q=select+col3%3E%3E0+from+1EPhndJHBm0ghi06Xq9d8P62hUwCisAcQxYxgH5ax&viz=MAP&h=false&lat=36.393799473451324&lng=-94.17718371249998&t=1&z=6&l=col3%3E%3E0&y=2&tmplt=2&hml=ONE_COL_LAT_LNG
I did some research and found the example of Chicago's map from google, and tried to adapt it to my current map
kmllayer = new google.maps.FusionTablesLayer({
query:{
select: "geometry",
from: "1UUVOpuu7ymfkmuzyV9dO8PXwT2QoMFuRTCy8scvn",
});
So I added that to the HTML from my Fusion Table map and then tried to add the code to my website. When I do this, I only get a blank screen. Also, I tried to add the code to my site without the KML code above, and it still only comes up blank. Am I missing a step? Any suggestions would be appreciated.
There is a syntax-error in your code, it has to be
kmllayer = new google.maps.FusionTablesLayer({
query:{
select: "geometry",
from: "1UUVOpuu7ymfkmuzyV9dO8PXwT2QoMFuRTCy8scvn",
}});
Working example with both layers:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(35, -97),
zoom: 6
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
new google.maps.FusionTablesLayer({
query: {
select: "geometry",
from: "1UUVOpuu7ymfkmuzyV9dO8PXwT2QoMFuRTCy8scvn",
},
map: map,
options: {
styleId: 2
}
});
new google.maps.FusionTablesLayer({
query: {
select: "geometry",
from: "1EPhndJHBm0ghi06Xq9d8P62hUwCisAcQxYxgH5ax",
},
map: map,
options: {
styleId: 2,
templateId: 2
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>
I want to display several placemarkers on the map with the help of lat's and long's that I have in my controller. There are no build errors and I am also able to see the map with the various placemarker but only the last info window is responding to the click event.
#section Script {
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
}
<div id="map_canvas" style="width: 875px; height: 600px">
</div> `
<script type="text/javascript">
//display the map
var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var myOptions = {
zoom: 4,
center: stockholm,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//display markers
#foreach (var item in Model)
{
<text>
var latLng = new google.maps.LatLng('#(item.Latitude)', '#(item.Longitude)');
var title = '#(item.Title)';
var contentString = '<h3>' + title + '</h3>'
var marker = new google.maps.Marker({
position: latLng,
map: map
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(contentString);
infoWindow.open(map, marker);
});
</text>
}
</script>
For each item in the model you are creating a marker. However the code to add the event listener to the marker (for the click ) is outside of the loop.
The event listener is only being added to the last marker, not every marker.