i want to have a Google map like system (preferably in java script) which i could apply to an image in a div like this
<div id="map">
<img src="example/src.jpg" alt="map" id="mapImg"/>
</div>
and i wanted it to be able to give me the zoom in and out and pan in directions functionality, i was wondering how i would go about this. i am new to Java script. i have a high res image i plan on using to do this.i have not tried much to be honest and i have seen many JQuery plugins for it but i want a purely java script version which would be easily implemented to pan and zoom
Yes Google Maps API v3 has an option called Image Map Types, in which you have an custom-image with pan and zoom tools.
Here check out this example.
Related
Does anyone know of any tool or plugin where I can create an embeddable interactive map similar to the image below? We are looking to have each of the blue numbers open a popup or tooltip with an image and more info. We would also prefer if we could style the map similar to our static map or just use the map as a background image and add the points with the tool.
I searched a lot over internet but did not find correct solution for the problem. i have to display marker on google map using lat long . I have two images to display as marker one image will work as background and another small image will display over it how can i do this.I am using javascript map api for this.
Note: i can't use photoshop to make these two image as one
There is a Google maps utility library called RichMarker that allows you to use HTML DOM as markers. Using HTML and CSS you can embed your images.
Here is demo of the utility.
You might be able to implement the solution provided here
https://stackoverflow.com/a/1782662/1109352
You will be using imbedded CSS instead
Unfortunately, on a site that I'm working on, the StreetView image of the business premises is out of date and not very flattering of the business.
Is there any way to make (via the Maps API) the map image a static image, which doesn't link to the full Google Maps page showing the StreetView image?
I'm trying to avoid manually embedding an image as I want to be able to do this programmatically.
Thank you.
Prembo.
I found a really simple solution to this, in my case I wanted an interactive map on desktop and a static map on mobile.
Using media queries I added the attribute {pointer-events: none !important;} to the parent div wrapping my map when changing to mobile.
Yep, take a look at the static maps api. There is an example of exactly what you need.
https://developers.google.com/maps/documentation/staticmaps/
You could style the map so it can't scroll, zoom, street view... etc.
https://developers.google.com/maps/documentation/javascript/reference#MapOptions
I want to make user able to draw routes and areas on static images as it is done on Google Maps. I've never done any JavaScript drawing before. Please advice me:
Any library/plugin who can help me to draw editable polylines and polygones on static images (and make it able to store the lines/points on my server)
What is the common way to draw for most browsers? As I know the "canvas" tag isn't supported enough by many browsers, and to make a line using multiple DIVs wouldn't be the best way to achieve this.
Is it possible to attach Google Maps API to a static picture?
Thank you!
Look into the Google Maps "GroundOverlay" object
http://code.google.com/apis/maps/documentation/javascript/overlays.html#GroundOverlays
This should allow you to lay your static image on top of the map, while keeping all of the map's regular functionality (infowindows, polylines, routes, etc).
I am familiar with how to draw circles and polygons on a Google Map using the javascript API. However, I've been looking at some android apps that allow you to "touch and draw" a freehand area on a map, not a collection of polyline/points or geometric shapes.
Is this functionality accessible to the js API? If so, how? I only find documentation on the polygons etc.
Note: this type of functionality is not what I'm looking for! Clicking at multiple points to define an area is fine, but I'm trying to do a real "drawing" style.
Thanks