I have managed to get a map of my location on my webpage, but I want to be able to add to option for a customer to type in their location & the route is then mapped on the map on my webpage.
I have searched around & there are demo's online, but they all take you off to a new window or the Google maps page. I want to contain the directions on a map that is already shown on my page.
from a comment:
<script>
var myCenter=new google.maps.LatLng(x,x);
function initialize() {
var mapProp = { center:myCenter, zoom:10, mapTypeId:google.maps.MapTypeId.ROADMAP };
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({ position:myCenter, });
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({ content:"x" });
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Check out this demo: https://jsfiddle.net/mjrulesamrat/qagkso5c/3/
You can find the Github repo here: https://github.com/mjrulesamrat/google_maps
As can be seen in the demo there is a search bar where you can type in your location.
<input class="controls form-control pac-input" type="text" placeholder="Search Box">
In your case you could fix the end location. Map reloads based on input, so no other windows are opened.
Check it out and customize it as you want! Hope this helps...
Related
I've included a google map on my webpage with a marker at the location. What I want to add is an existing infoWindow of that location when the page loads.
This is the code i have:
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(51.257195, 3.716563),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
new google.maps.Marker({
position: new google.maps.LatLng(51.257195, 3.716563),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
screenshot: http://puu.sh/gMtoB/16312f42b7.jpg
Now the "AXA..." is an existing point of interest on google maps, how would i go about that my marker is actually 'linked' to that existing point of interest with the infowindow opened by default.
in short: i would like a marker on that location with the infowindow opened when the webpage loads.
I think the solution would be to first find the place_id and then add your marker using the place ID you found rather than using longitude and latitude.
I created a live demo here:
https://jsfiddle.net/qzo41qzd/
There is also an example in the documentation about placing a marker on the google map using place_id:
https://developers.google.com/maps/documentation/javascript/places#placeid
i was checking out the google map api to integrate in my website.
made this page with what ever i could understand so far.
everything is working fine but there is just one thing, that i want three markers on the same map.
when i am adding more than one markers then the map stops working.
test link : http://goo.gl/X9q92s
you will have a better understanding if u see my link.
this is the code that i got from google map api.
and i edited it to get grey scale map with my desired marker box.
i just want to add two more....
Please help.
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You should place your "new marker" code into its own function, like so:
function LoadMarkers(name, lat, lng) {
var MarkerLatLng = new google.maps.LatLng(lat, lng);
var MarkerOption = { map: map, position: MarkerLatLng, title: name};
var Marker = new google.maps.Marker(MarkerOption);
}
Putting this into its own function allows you to "refresh" the markers with ease, by simply invoking the function with a timer or some other event. A program I'm working on refreshes the map every few seconds, as my data source is constantly changing with new/removed/updated records that should be reflected immediately on the map. I think this is a great way to do this.
Then, in your program, you can create a loop that shoots the information for each marker in by invoking the LoadMarkers function. I've recently fallen in love with SqlDataReader.
Your loop would iterate through a SqlDataReader and each record read will invoke the script like so:
InvokeScript("LoadMarkers", New Object() {name, lat, lng})
This is a great moment to also add an InfoWindow for each marker.
var infowindow = new google.maps.InfoWindow(
{
content: "Content here"
});
As well as a click listener for the InfoWindows. ;)
google.maps.event.addListener(Marker, 'click', function () {
typeof infoWindowsOpenCurrently !== 'undefined' && infoWindowsOpenCurrently.close(); //If there is an InfoWindow currently open, close it
infowindow.open(map, Marker); //Open a new one for the selected marker
infoWindowsOpenCurrently = infowindow; //Set the new info window to the temporary variable
});
Some might not like this method of using a loop. I like it because I can "personalize" each marker for each record, while personalizing each of their InfoWindows too. In my code above, assume that "name" is a unique ID that lets you specify a specific marker for later use, such as identifying which marker was clicked and which InfoWindow is currently open.
I used the Google Maps API to render a static map with pins on it.
Image here.
Is there a way to make a popup for the pins like on the standard Google Maps (where you can normally scroll around)?
It's on a WordPress page: http://clairepyper.org/ The table to the left of the map shows modals on clicking a place name. I'm wondering if there is way to get the modals opening from clicking the markers instead/as well?
Thanks.
You use something like this:
<script type="text/javascript">
function init_map(){
var myOptions = {
zoom:14,
center:new google.maps.LatLng(40.26489,-74.533312),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(40.26489,-74.533312)});
infowindow = new google.maps.InfoWindow({content:"<b>Lawton's Service Company, LLC</b><br/>400 Mercer St<br /> Hightstown, NJ 08520" });
google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});
infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
</script>
You can add an indefinite number of those markers with a LatLng entry, and it's own little box over it.
(Sorry for the lack of code formatting. My browser is not showing the cool code tools.)
I am totally lost, my marker won't show on the map. I did the exactly as shown on the Google Maps example. I can't get the marker to appear on mylatlng. The icon image is in the same folder as the html page.
$("#b1").on("click",function(){
function initialize(){
var myLatLng = new google.maps.LatLng(40.7404, -74.1789);
var mapOptions = {
zoom:5,
center: myLatLng
}
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var image = 'marker.png';
var myLatLng = new google.maps.LatLng(40.64043,-74.2789);
var Name = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image
});
marker.setMap(map);
});
google.maps.event.addDomListener(window, 'load', initialise);
UPDATE:
FIGURED IT OUT. I need to have google.maps.event.addDomListener(window, 'load', initialise); outside the function.
UPDATE 2:
well i don't need to have the 'initialize' within google.maps.event.addDomListener(window, 'load', initialise); if i do that. it would create only one marker. After deleting the it, marker is working for all the 30 onClick list that i have. And yeah i don't need the function initialize()
Couple of mistakes here ,
1:You were using wrong marker variable to set Map,initialize marker as global variable.
2:To get map display you have to use Google map Dom Events google.maps.event.addDomListener(document.getElementById('yourbuttonid'), 'click', initialize);
3:And it will be out of the intialise function.
Demo
First time trying to build a map using Google's map API and have hit a roadblock.
I'm trying to make a custom map that has:
Multiple location markers
Custom icons for the markers
A custom url link for each marker so that whenever someone clicks on the marker they go to the url link
The map is for a client that owns a few offices in Soho, London. I've been testing out various code in Google's playground + using w3 schools code tester. I've been finding examples of how to setup the various elements of my map which all work fine when doing it one by one.
However it seems if I wanted to combine all the features of the map that the code needs to be setup differently.
Here's what I have so far:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 300px;"></div>
<script type="text/javascript">
var locations = [
['56-58 Broadwick Street', 51.5053, -0.1481, 5],
['79 Wardour Street', 51.512370, -0.133300, 3],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(51.5132695,-0.1356768),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
</script>
</body>
The idea being that the var locations will be the various office locations that my client own. Each one of these office location markers will link to the relevant office page.
Sorry to have to ask you guys but can anyone lead me in the right direction? I thought I could piece all the code together but it seems like if I want to combine all 3 features the code is setup differently.
Thanks for your time.
For starters, rather than have your JS in the body of your document, move it into the head.
And add an event listener for when the window loads to call an initialize function which creates the map:
google.maps.event.addDomListener(window, 'load', initialize);
And move all the JS that's currently not in any function at all, into that initialize function.
I'm not sure the point of your AutoCenter function. If it's just to make the map expand to fit the bounds of your markers, put this into your initialize function too.
Also this may just be a sample of some data rather than what you're actually doing, but that trailing comma after the last item will cause this array to error in IE:
var locations = [
['56-58 Broadwick Street', 51.5053, -0.1481, 5],
['79 Wardour Street', 51.512370, -0.133300, 3],
];