I have a question about placing markers on the google maps get directions. I have this script which on page load renders map however, I want to put company logo on the this map. I mean like initial map without any directions.
src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script><script type="text/javascript">// <![CDATA[
var map;
var directionsDisplay;
var manila = new google.maps.LatLng(55.009657,-1.450706);
var directionsService = new google.maps.DirectionsService();
function initialize() {
// Make the route draggable
var rendererOptions = {
draggable: true,
}
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var mapOptions = {
zoom:13,
mapTypeId: google.maps.MapTypeId.DRIVING,
center: manila,
}
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
I know that in order to have icon on a map you need to create marker object...
var marker=new google.maps.Marker({
position:manila,
icon:'image-link'
});
and to use this marker you set map:
marker.setMap(map);
But I am using directionsDisplay.setMap(map); instead of marker.setMap(map); how I can pass this marker object to directionsService map?
G.I.Y.F This page explains how to add your own logo to a Google Map.
See also: How to add logo to copyrights in google maps?
http://www.developerdrive.com/2013/08/adding-a-custom-icon-to-a-google-maps-marker/
etc
Related
I recently learn t to add custom markers to the Google maps. So i created a route with directions API. After that I added my own markers. Now i am facing a problem where both, the original one and the custom one are showing up. How can i remove the default markers to show my originals one.
Code I wrote to add custom markers
function addmarkers()
{
$.each(order,function(key,value)
{
geocoder.geocode( { 'address': waypts[value]}, function(results)
{
var source = 'images/markers/'+i+'.png';
var latlang = results[0].geometry.location;
var marker = new google.maps.Marker({
position: latlang,
map: map,
icon: source
});
});
});
};
I am calling this function just after the initialize() function
function initialize() // creating maps
{
google.maps.visualRefresh = true;
currentlocation = new google.maps.LatLng(mylat,mylong);
var mapoptions =
{
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: currentlocation
}
map = new google.maps.Map(document.getElementById('map'),mapoptions);
addmarkers();
directionsDisplay.setMap(map);
};
Now you can see in the pic, I am getting both the default as well as the customized markers. Where is this going wrong ?
I have a working version of map with a draggable marker. Zoom-in to include all markers works
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
where results[0].geometry.location is new draggable location.
This works if the new location is forming a bigger area. But when I drag the marker to a closer location to the rest of the markers, I don't think this extends the bounds and therefore, no zoom-in.
Any idea?
When you drop the marker, add the marker position to a temporary LatLngBounds object that includes the original bounds and fit the maps bounds to that on each drag drop.
var mapOptions = {
center: new google.maps.LatLng(38.68551, -96.341308),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var bounds = new google.maps.LatLngBounds(),
markers = [];
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.69, -96.14),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.65, -96.44),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.56, -96.56),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.42, -96.98),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.31, -96.45),map: map}));
for (var m in markers) {
bounds.extend(markers[m].getPosition());
}
map.fitBounds(bounds);
var dropMarker = function(latlng) {
var marker = new google.maps.Marker({position: latlng, map: map}),
tempBounds = new google.maps.LatLngBounds();
// notice we use the union method here to add the original bounds object
tempBounds.union(bounds).extend(marker.getPosition());
map.fitBounds(tempBounds);
}
// imitate dropping marker far away from others
setTimeout(function() {
dropMarker(new google.maps.LatLng(31, -96));
}, 2000);
// imitate dropping marker close to others
setTimeout(function() {
dropMarker(new google.maps.LatLng(38.5, -96.5));
}, 5000);
Instead of just fitting the temporary bounds you could try the map panToBounds method to get a nice smooth transition.
i am working on google maps, what i want to do is to click on the map it add a marker to the map its working fine but the problem is that i need to move the same marker to a new place if i click some where else instead of new marker. and also when i click on any point it give me the address of that place in a text field
here is my code
<script type="text/javascript">
var map;
var markersArray = [];
function initialize() {
var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
var mapOptions = {
zoom: 7,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListenerOnce(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
}
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
}
You can call clearOverlays anytime you create a new marker.this way you hide the previous marker and only the new is shown.
another way is to have a var marker just as you have a var map. you can edit the markers position in addMarker.
as far as geocoding is concerned take a look at this
I wanna simply get markers from a kml file and show them on a map, but add "mouseover" for tooltip, not click
using this code, but it don't work (works if i use click)
function initialize() {
var latlng = new google.maps.LatLng(53.477876, -2.471289);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//kml begin
var nyLayer = new google.maps.KmlLayer('http://code.nebtron.com/kml2.kml', {suppressInfoWindows: false});
nyLayer.setMap(map);
google.maps.event.addListener(nyLayer, "mouseover", function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInDiv(text);
});
function showInDiv(text) {
var sidediv = document.getElementById('contentWindow');
sidediv.innerHTML = text;
}//kml end
}
Demo: http://code.nebtron.com/map3.php
As pointed out here, there is no mouseover event for KMLLayers. But maybe you could use a polygon. Here's a link.
Hope this helps!
I am making a map where I have the KML load and the markers load on the same canvas in which I want the boundary to be however big the markers even though the kml is on the canvas. I'm using this in conjunction with php so there's a bit of php in the code but nothing to special besides entering information for variables.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
if ($('#map_canvas').length != 0) {
var myLatlng = new google.maps.LatLng(45.266438, -93.233225);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds = new google.maps.LatLngBounds();
var kmlLayer = new google.maps.KmlLayer('<?php bloginfo('template_url'); ?>/includes/delivery-maps/mansettisdel.kml', { map: map });
var jsongeo = <?php echo(json_encode($geo_json)); ?>;
$.each(jsongeo, function(index, value) {
var latlng = new google.maps.LatLng(value.lat,value.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
bounds.extend(latlng);
map.fitBounds(bounds);
});
}
});
</script>
here is the var_dump of the json that I am looping through the lat and longitude.
string(617) "[{"type":"delivery","lat":"45.341969","lng":"-93.277657","date":"2011-07-11"},{"type":"delivery","lat":"45.005360","lng":"-93.323738","date":"2011-07-12"},{"type":"delivery","lat":"45.319408","lng":"-93.202446","date":"2011-07-12"},{"type":"delivery","lat":"45.131786","lng":"-93.216576","date":"2011-07-13"},{"type":"delivery","lat":"44.804131","lng":"-93.166885","date":"2011-07-13"},{"type":"delivery","lat":"45.119965","lng":"-93.287727","date":"2011-07-13"},{"type":"delivery","lat":"42.358433","lng":"-71.059776","date":"2011-07-13"},{"type":"delivery","lat":"34.195915","lng":"-84.507317","date":"2011-07-13"}]"
Now I'm not having issues with the markers going through but just the bounds. I don't know if there is something other I would have to do with the lat,long but I read up on this a ton and can't find a thing.
Here is what is showing up.
What shows up
Here is what I would like to show up.
What I want to show up
Even though the KML is on the map I would like the markers to be the bounds. Is there something that google maps does that sets it to the KML or do I have the bounds done incorrectly? I notice it goes to the bounds view and then RIGHT to the KML view.
Try adding the option preserveViewport: true to the KML options so it reads:
var kmlLayer = new google.maps.KmlLayer('<?php bloginfo('template_url'); ?>/includes/delivery-maps/mansettisdel.kml', {
map: map,
preserveViewport: true
});
That should stop it zooming it into the KML bounds.
http://code.google.com/apis/maps/documentation/javascript/reference.html#KmlLayerOptions