I'm using squarespace to build my website and want to insert a custom map from google maps javascript api. I've followed tutorial from W3school and from Google's own tutorial to build my map and follow steps as below :
What I'm trying to archive is a map like this
google map example
Step 1: Insert a embed block for html
<div id= "map"></div>
Step 2: insert javascript in page header
<script
src="http://maps.google.cn/maps/api/js?key=my-key">
</script>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById(‘map'), {
zoom: 12,
center: {lat: 48.877412, lng: 2.359221},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Define the LatLng coordinates for the polygon's path.
var 10th = [
{lat: 48.883863, lng: 2.349500},
{lat: 48.870752, lng: 2.347915},
{lat: 48.867593, lng: 2.363981},
{lat: 48.872958, lng: 2.377065},
{lat: 48.877800, lng: 2.370605},
{lat: 48.882765, lng: 2.370164},
{lat: 48.884218, lng: 2.368480},
{lat: 48.884670, lng: 2.360258},
{lat: 48.883863, lng: 2.349500}
];
// Construct the polygon.
var 10th = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
10th.setMap(map);
}
</script>
Step 3 : in custom css section
#googleMap {
width: 100%;
height: 380px;
}
But so far, I got either a blank page once javascript injected or error page (with code visible on top of the page... )
Here the link to my webpage on SquareSpace https://handa-cheng-a3wm.squarespace.com/1starrondissement
Thanks !
You have few typos in your code:
var 10th = [...] // invalid variable name
^---
Variables names in JavaScript must not begin with numbers. And you have defined the function but didn't run it.
You have not set height for #map in css.
<div id= "map"></div>
#googleMap { // <== this is not correct id as used in html above
width: 100%;
height: 380px;
}
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 48.877412, lng: 2.359221},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Define the LatLng coordinates for the polygon's path.
var points = [
{lat: 48.883863, lng: 2.349500},
{lat: 48.870752, lng: 2.347915},
{lat: 48.867593, lng: 2.363981},
{lat: 48.872958, lng: 2.377065},
{lat: 48.877800, lng: 2.370605},
{lat: 48.882765, lng: 2.370164},
{lat: 48.884218, lng: 2.368480},
{lat: 48.884670, lng: 2.360258},
{lat: 48.883863, lng: 2.349500}
];
// Construct the polygon.
var polygon = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polygon.setMap(map);
}
initMap();
#map {
height: 300px;
}
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<div id="map"></div>
Related
I need to cover some city by using some color, in some area. I am using google maps API, can give me some idea how to solve this?
Example:
You can construct a polygon using the Polygon class.
Simple example from google provided.
The paths property can take an array of arrays to create multiple polygons.
See the full example here: https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
And documentation: https://developers.google.com/maps/documentation/javascript/reference/polygon
Eg:
var triangleCoords = [
[
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
],
[
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
]
];
Hope that helps.
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: 'terrain'
});
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polygon</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="index.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
I am having an intermittent issue where my Google Map will not load upon initially loading the webpage, causing a blank map. On refresh it will load without issue.
This is the error message I am getting in the Chrome console:
message: "initMap is not a function"
name: "InvalidValueError"
HTML for my map:
<div class="container-fluid">
<div id="map"> </div>
</div>
JavaScript:
function initMap() {
var uluru = {lat: 28.0394654 , lng: -81.94980420000002};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: uluru,
//disableDefaultUI: true,
gestureHandling: 'cooperative'
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var triangleCoords = [
{lat: 28.0990114, lng: -82.0035785}, //Kathleen Rd - Lakeland
{lat: 28.0186323, lng: -82.11286410000002}, //Plant City
{lat: 27.8953038, lng: -81.97341719999997}, //Mulberry
{lat: 27.8964147, lng: -81.84313739999999}, //Bartow
{lat: 27.9014133, lng: -81.58590989999999},//Lake Wales
{lat: 28.1141841, lng: -81.61785359999999}, //Haines City
{lat: 28.1825147, lng: -81.8239676} //Polk City
];
var expressCoverage = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#333333',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#333333',
fillOpacity: 0.2
});
expressCoverage.setMap(map);
}
I've cleared the cache in my browser with no effect on the issue. The problem persists in Chrome, Mozilla and Mobile Safari. Could something be happening with the API Key when the map is not loading?
Perhaps the 'InvalidValueError' is arising because you aren't declaring 'uluru' with the correct format. Coordinates in the Google Maps API need to be in LatLng form. Try replacing
var uluru = {lat: 28.0394654 , lng: -81.94980420000002};
with
var uluru = new google.maps.LatLng(28.0394654, -81.94980420000002);
I am using the below code to Plot a Route
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
Using Polylines gives only Straight Lines is there any other method to Plot the Route as in the Sample Route Image.
I have tried regarding but didn't got any such method
Take a look here:http://www.geocodezip.com/v3_polyline_example_arc.html and here: http://www.geocodezip.com/v3_polyline_example_rhumb.html
To do this you probably want to abstract the path over a sinusoid of some kind to make it more curvy and visually attractive. Check out the question below, there are a lot of in-depth answers.
Curved line between two near points in google maps
I'm trying to code 2 independent snapped-to-road polygons created from 2 different arrays of lat lon points. When I change the code to only do one polygon, it looks great. But when I change the code to do both polygons, I get different polygons than I had seen when I had done one at a time. Also, I've noticed that the 2nd polygon no longer snaps-to-roads like it should and like I've seen when only coding for one polygon.
I'm pretty confused by this.. It seems like the JS API is struggling to put the polygon together and snap to roads. Is it too many lat/lon points?
I appreciate any and all help. Please don't hesitate to ask if I'm not providing enough info.
Here is my code:
<script>
function initMap() {
var pos = {lat: 29.744860,lng: -95.361302};
var myOptions = {
zoom: 11,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
//FIRST POLYLINE SNAP TO ROAD
roadTrip1 = [
{lat: 29.596497, lng: -95.426788},
{lat: 29.540731, lng: -95.415950},
{lat: 29.533925, lng: -95.400490},
{lat: 29.526571, lng: -95.383886},
{lat: 29.493418, lng: -95.246661},
{lat: 29.429157, lng: -95.240067},
{lat: 29.475006, lng: -94.981166},
{lat: 29.652252, lng: -95.033159},
{lat: 29.637473, lng: -95.163095},
{lat: 29.596965, lng: -95.415699}
];
var traceroadTrip1 = new google.maps.Polygon({
path: roadTrip1,
strokeColor: '#5c6670',
strokeOpacity: 0.8,
strokeWeight: 4,
fillColor: '#5c6670',
fillOpacity: 0.25
});
var service1 = new google.maps.DirectionsService(),traceroadTrip1,snap_path=[];
traceroadTrip1.setMap(map);
for(j=0;j<roadTrip1.length-1;j++){
service1.route({origin: roadTrip1[j],destination:
roadTrip1[j+1],travelMode:
google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceroadTrip1.setPath(snap_path);
}
});
}
// SECOND POLYLINE SNAP TO ROAD
roadtrip2 = [
{lat: 29.704807, lng: -95.374714},
{lat: 29.753679, lng: -95.354992},
{lat: 29.770151, lng: -95.350105},
{lat: 29.813047, lng: -95.399361},
{lat: 29.780510, lng: -95.501962},
{lat: 29.731015, lng: -95.501280},
{lat: 29.678863, lng: -95.493037},
{lat: 29.678526, lng: -95.492811},
{lat: 29.696583, lng: -95.417439},
{lat: 29.693119, lng: -95.413344},
{lat: 29.701318, lng: -95.374242},
{lat: 29.704807, lng: -95.374714}
];
var traceroadtrip2 = new google.maps.Polygon({
path: roadtrip2,
strokeColor: '#5c6670',
strokeOpacity: 0.8,
strokeWeight: 4,
fillColor: '#5c6670',
fillOpacity: 0.25
});
var service2 = new google.maps.DirectionsService(),traceroadtrip2,snap_path2=[];
traceroadtrip2.setMap(map);
for(j=0;j<roadtrip2.length-1;j++){
service2.route({origin: roadtrip2[j],destination: roadtrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path2 = snap_path2.concat(result.routes[0].overview_path);
traceroadtrip2.setPath(snap_path2);
}
});
}
};
window.onload = function() { initMap();};
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API&signed_in=true&callback=initMap"></script>
Your code is getting status OVER_QUERY_LIMIT and silently failing, if you add an alert when it fails, you will see the failures:
if(status == google.maps.DirectionsStatus.OK) {
//...
} else alert("directions service 2 failed:"+status);
fiddle with added alert code
modify your code to handle the query limit, see this related question:
OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down? (regarding the geocoder, but a similar strategy will work for the directions service)
I'm planning to use google map "containsLocation()" API in one of my application. The doc link is - https://goo.gl/4BFHCz
I'm following the same example. Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon arrays</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
//center: {lat: 24.886, lng: -70.269},
center: {lat: 12.9629277, lng: 77.7178972},
zoom: 30,
});
/*var triangleCoords = [
{lat: 25.774, lng: -80.19},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];*/
var triangleCoords = [
{lat: 12.96301273, lng: 77.71785952},
{lat: 12.96314857, lng: 77.71784072},
{lat: 12.96316124, lng: 77.71784037},
{lat: 12.96295465, lng: 77.71788993},
{lat: 12.96293329, lng: 77.7179345},
];
var bermudaTriangle = new google.maps.Polygon({paths: triangleCoords});
google.maps.event.addListener(map, 'click', function(e) {
var curPosition = {"lat":12.9629277,"lng":77.7178972};
//var curPosition = e.latLng;
console.log("e content : "+JSON.stringify(e.latLng));
console.log("curPosition content : "+JSON.stringify(curPosition));
var resultColor =
google.maps.geometry.poly.containsLocation(curPosition, bermudaTriangle) ?
'red' :
'green';
new google.maps.Marker({
position: curPosition,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: resultColor,
fillOpacity: .2,
strokeColor: 'white',
strokeWeight: .5,
scale: 10
}
});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCiAur6ANJsV776iVmMDJcHYjQkXrXyu8s&libraries=geometry&callback=initMap"
async defer></script>
</body>
</html>
If you see I've created a curPosition variable which holds the latLng data. My problem at here is as long as var curPosition = e.latLng; it works fine but, the moment I changed that to var curPosition = {"lat":12.9629277,"lng":77.7178972}; it's started showing error "Uncaught TypeError: a.lng is not a function".
Can't able to understand why it's happening? Any clue...?
Console.log screen shot attached
Regards
the containsLocation method requires a google.maps.LatLng as the "point" (at least at present), you can't use a google.maps.LatLngLiteral for currentLocation.
from the documentation:
containsLocation(point:LatLng, polygon:Polygon) | Return Value: boolean
Computes whether the given point lies inside the specified polygon.
var curPosition = new google.maps.LatLng(12.9629277,77.7178972);
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 12.9629277,
lng: 77.7178972
},
zoom: 30,
});
var triangleCoords = [
{lat: 12.96301273,lng: 77.71785952}, {lat: 12.96314857, lng: 77.71784072}, {lat: 12.96316124, lng: 77.71784037}, {lat: 12.96293329, lng: 77.7179345}, {lat: 12.96295465, lng: 77.71788993}];
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
map: map
});
var curPosition = new google.maps.LatLng(12.9629277, 77.7178972);
console.log("curPosition content : " + JSON.stringify(curPosition));
var resultColor =
google.maps.geometry.poly.containsLocation(curPosition, bermudaTriangle) ?
'red' :
'green';
new google.maps.Marker({
position: curPosition,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: resultColor,
fillOpacity: .2,
strokeColor: 'white',
strokeWeight: .5,
scale: 10
}
});
var curPositionB = new google.maps.LatLng(12.963, 77.71788993);
var resultColorB = google.maps.geometry.poly.containsLocation(curPositionB, bermudaTriangle) ?
'red' :
'green';
new google.maps.Marker({
position: curPositionB,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: resultColorB,
fillOpacity: .2,
strokeColor: 'white',
strokeWeight: .5,
scale: 10
}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>